element-ui table sortable排序 掉后端接口方式

本文主要是介绍element-ui table sortable排序 掉后端接口方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实例:

官方解释:如果需要后端排序，需将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.把接口换成自己的即可,代码可以直接复制就行,实现的单列排序,并不是全部.

这篇关于element-ui table sortable排序 掉后端接口方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---