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的值返还给后台。

上一篇下一篇

猜你喜欢

热点阅读