实例:
官方解释:如果需要后端排序,需将sortable
设置为custom
,同时在 Table 上监听sort-change
事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。
1.table上要加 @sort-change="sortChange"
2.每一列需要加上 sortable="custom" 不然不生效
3.定义排序字段,后端定义的
4.直接上方法
// 排序
sortChange(column) {
console.log(column,'column排序');
for (const key in this.currentSort) {
if (key.endsWith('Order') && key !== `${column.prop}Order`) {
this.currentSort[key] = '';
}
}
this.currentSort.orderType = column.order === 'ascending' ? 'asc' : 'desc';
this.currentSort[`${column.prop}Order`] = column.prop;
this.getList();
},
5.最后调用接口list
async getList() {
try {
let params = {
...this.bindParams,
...this.currentSort
};
this.$refs.tree.setCurrentKey(null);
Object.keys(params).forEach(key => {
if (params[key] === '') delete params[key];
});
this.$refs.tree.setCurrentKey(null);
const res = await deviceRealList2(this.current, this.size, params)
console.log(res, '新列表数据');
this.tableData = res.data.data.records
this.total = res.data.data.total
} catch (e) {
console.log(e);
}
},
6.把接口换成自己的即可,代码可以直接复制就行,实现的单列排序,并不是全部.