elementUI中的表格,后台(远程)排序问题
2019-05-22 本文已影响0人
德日班勒
在element表格中,在列中设置sortable属性即可实现以该列为基准的排序,此排序为当前页面该列的排序。
例如:
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" sortable width="180">
</el-table-column>
</el-table-column>
但是如果在实际项目中需要后台所有数据一起排序,需要使用另外一种方法。
来自于elementUI 表格 API
我们需将sortable设置为custom(sortable默认为false),并且在el-table组件监听sort-change事件(即点击排序触发事件)
<el-table @sort-change='sortChange'>
<el-table-column sortable='custom' prop="date" label="时间">
</el-table-column>
</el-table>
当我们点击排序后会触发sortChange函数
sort-change方法自带一个对象,对象内有三个字段他们分别代表意义是:
column:当前列的信息
order:排序的规则(升序、降序和默认[默认就是没排序])
prop:当前列需要排序的数据
我们可以打印出来看看
sortChange(column) {
console.log(column)
}
console.log(column)打印结果
在sortChange()中获取到数据,column.order即是当前排序规则,一般我们也是把column.order的值返还给后台。