【Element UI排序】JavaScript 的表格排序sortable=“custom“和 @sort-change

Sortable — 是一个 JavaScript 库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。

一、elementUI排序功能实际案例

表格每一项中加上sortable，可以展示排序的小图标。

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。
如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

sort-change事件：当排序发生变化时触发该事件。

<el-tablev-loading="loading":row-class-name="setRowClass":cell-class-name="setCellClass":data="dataList.rows":header-cell-style="{background:'#F7F7F7'}"borderstyle="width: 100%;"// 监听sort-change事件@sort-change="getAllProSort"><el-table-columnprop="division_name"label="部门名称"header-align="center"align="left"min-width="35%"><template slot-scope="scope"><a style="color: #26A97D;text-decoration: underline;" @click="handleDept(scope.row)">{{ scope.row.division_name }}</a></template></el-table-column><el-table-columnprop="sales"label="销售额"header-align="center"min-width="35%"align="right"// 将sortable设置为customsortable="custom"><template slot-scope="scope"><span>{{ formatData(scope.row.sales) }}</span></template></el-table-column>

    getAllProSort(order) {const that = thisif (order.order) {that.order_par = order.prop + ' ' + order.order.substring(0, order.order.indexOf('n') - 1)} else {that.order_par = 'division_no'}that.getDeptMonthBudgetDetailData()},

    getDeptMonthBudgetDetailData() {this.loading = truethis.par.order_par = this.order_parthis.par.data_type = this.scopethis.par.date_month = this.dataYearMonthgetDeptMonthBudgetDetail(this.par).then(res => {if (res.status === 'succ' && res !== null) {this.dataList = res.data} else {this.dataList = []}this.loading = false}).catch(err => {console.log(err.message)// alert('数据获取失败，请重试！')})},

data() {return {scope: 'sales',dataList: [],total: [],loading: false,par: {},date_start: '',date_end: '',// 初始化order_parorder_par: 'division_no desc'}},

二、 实例2

也可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

<template><el-table:data="tableData"style="width: 100%":default-sort = "{prop: 'date', order: 'descending'}"><el-table-columnprop="date"label="日期"sortablewidth="180"></el-table-column><el-table-columnprop="name"label="姓名"sortablewidth="180"></el-table-column><el-table-columnprop="address"label="地址":formatter="formatter"></el-table-column></el-table>
</template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {formatter(row, column) {return row.address;}}}
</script>

三、 实例3

使用的default-sort属性：
取值为对象，设置表格数据的默认排序结果。

<el-table :default-sort=“{prop:‘age’,order:‘descending’}”>

prop设置排序字段，可以是没有实现可排序功能的字段。

参考文章Element UI排序
参考文章el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能，利用@sort-change实现动态数据排序，el-table排序方法，el-table可变数据的动态排序