需求背景: 需要后端接口排序,进入页面时默认排序,点击排序时先降序再升序,重置搜索条件可变回默认排序,接下来只需四个配置,就可以写出完美的table接口自定义排序
配置一:sortable="custom"
和 @sort-change="sortChange"
如果需要后端排序,需将sortable设置为custom,同时在 Table
上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。
配置二::default-sort="{prop: 'salesVolume', order: 'descending'}"
通过 Table 的default-sort属性设置默认的排序列和排序顺序
配置三::sort-orders="['descending','ascending']"
传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序。数组中的元素需为以下三者之一:ascending表示升序,descending 表示降序,null 表示还原为原始顺序,
[‘ascending’, ‘descending’, null]
配置四:ref="table"
,this.$refs.table.sort('salesVolume','descending');
sort,手动对 Table 进行排序。参数prop属性指定排序列,order指定排序顺序。
实践:
<el-table
:data="tableData"
ref="table"
@sort-change="sortChange"
:default-sort="{prop: 'viewNum', order: 'descending'}"
>
<el-table-column label="观看次数" align="center" sortable="custom" :sort-orders="['descending','ascending']" prop="viewNum" />
<el-table-column label="销量" align="center" sortable="custom" :sort-orders="['descending','ascending']" prop="saleNum" />
</el-table>
// 重置搜索条件
resetQuery() {
this.$refs.table.sort('viewNum','descending');
},
// 排序改变
sortChange(row) {
const { column, prop, order } = row
//column表示选中排序列的详细信息,prop表示选中的拍序列,order表示选中拍序列的排序规则
// 其他代码逻辑
...
...
...
// 列表查询方法
this.getList()
}