实例:
官方解释:如果需要后端排序,需将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.recordsthis.total = res.data.data.total} catch (e) {console.log(e);}},
6.把接口换成自己的即可,代码可以直接复制就行,实现的单列排序,并不是全部.