1、如果需要后端排序,需设置sortable,同时在 Table 上增加sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。
<el-table @sort-change='sortTableFun'>
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column prop="pid" label="物料编码" min-width="80px" show-overflow-tooltip sortable></el-table-column>
</el-table>
2、在methods监听sort-change事件
data() {
return {
column: '',
order: '',
pageSize: 10,
currentPage: 1,
total: 0,
loading: false, // 按钮加载 状态
}
}
//表格排序
sortTableFun(column) {
this.column = column.prop;
if (column.prop) {
if (column.order == 'ascending') {
this..order = 'ASC';
} else if (column.order == 'descending') {
this.order = 'DESC';
}
this.productList()
}
},
3、发请求数据到后端 返回数据
productList() {
this.listLoading = true
let params={
order: this.order,
column: this.column,
curPage: this.currentPage,
pageSize: this.pageSize,
}
tabelList(params).then(response => {
this.list = response.data.items
this.total = response.data.total
this.listLoading = false
})
}
这样就可以实现element sort 向后端请求排序啦!!!