uni-table sortable

### 实现 Uni-app 表格排序功能指南 在 Uni-app 中实现表格排序主要依赖于前端逻辑处理数据的顺序，而不是通过内置组件属性来完成。对于表格排序的功能开发，可以采用如下方法： #### 数据准备阶段 创建一个用于存储原始数据的对象数组 `tableData` ，该对象应包含表头对应的键名以及相应的值。 ```javascript let tableData = [ { name: 'Tom', age: 28, address: 'No.1 Century Avenue, Shanghai' }, { name: 'Jerry', age: 30, address: 'No.2 Century Avenue, Beijing' } ]; ``` #### 排序函数定义 编写一个通用的比较器函数来进行升序或降序排列操作。此函数接收两个参数：一个是当前列字段名称作为依据；另一个是指定升降序模式布尔变量。 ```javascript function compare(prop, asc) { return function (obj1, obj2) { let val1 = obj1[prop]; let val2 = obj2[prop]; if (!isNaN(Number(val1)) && !isNaN(Number(val2))) { val1 = Number(val1); val2 = Number(val2); } if (asc) { if (val1 < val2) return -1; else if (val1 > val2) return 1; else return 0; } else { if (val1 < val2) return 1; else if (val1 > val2) return -1; else return 0; } }; } ``` #### 绑定点击事件触发排序 当用户单击某一列表头时，调用上述编写的比较器函数并更新视图中的显示数据源。这里假设已经有一个名为 `sortColumn` 的状态用来保存上次被选中排序的列名，并且还有一个标志位 `isAsc` 来记录当前是升序还是降序[^1]。 ```html <template> <!-- 假设这是你的表格头部 --> <view class="uni-tr"> <text @click="handleSort('name')">姓名</text> <text @click="handleSort('age')">年龄</text> <text>地址</text> </view> <!-- 这里是你实际渲染的数据行 --> <block v-for="(item,index) in sortedTableData" :key="index"> ... </block> </template> <script> export default { data() { return { sortColumn: '', isAsc: true, originalTableData: [...], // 初始化时赋给真实的数据集 tableData: [...] // 显示使用的副本数据集 }; }, computed: { sortedTableData() { const self = this; if (!self.sortColumn || !Array.isArray(self.tableData)) return self.tableData; return [...self.tableData].sort(compare(self.sortColumn, self.isAsc)); } }, methods: { handleSort(columnName) { if (this.sortColumn === columnName) this.isAsc = !this.isAsc; // 切换方向 else { this.sortColumn = columnName; this.isAsc = true; // 默认首次按升序排 } // 更新显示的数据源 this.$forceUpdate(); } } }; </script> ```