背景
crm系统中,使用elementui实现,table数据要根据某字段对所有数据后端排序。
展示
image.png
实现方案
点击排序按钮,获取排序方式和排序字段,通过接口传给后端,返回排序后的数据进行展示。
具体代码实现
1、table上要监听排序sort-change
<el-table ref="shopTable" :data="tableData" @sort-change="sortChange">
2、column上要加自定义sortable
<el-table-column :label="$t('shop.ratingStar1')" prop='ratingStar' sortable width="100"></el-table-column>
3、sortChange实现
sortChange(column) {
if ( column.order ) {
this.shopForm.sortField = column.prop
this.shopForm.sortOrder = column.order === 'descending' ? 'desc' : 'asc'
} else {
this.shopForm.sortField = ''
this.shopForm.sortOrder = ''
}
this.handleSearch() //获取列表数据接口
},