el-table 排序,四个配置实现默认排序,手动排序,只升序降序(及设置点击先降序再升序)

需求背景: 需要后端接口排序,进入页面时默认排序,点击排序时先降序再升序,重置搜索条件可变回默认排序,接下来只需四个配置,就可以写出完美的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()
}
  • 8
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-table排序规则是根据列的数据类型来判断的,所以如果你的列内容不是字符串或数字,可能会出现排序错误的问题。 为了解决这个问题,你可以在 el-table配置 sorter 函数来自定义排序规则。sorter 函数接收两个参数:rowA 和 rowB,分别代表两条数据行,你需要在该函数中返回一个数字来表示 rowA 和 rowB 的大小关系。例如,如果你要按照日期进行排序,可以将日期转换为时间戳,然后比较时间戳的大小。 下面是一个示例代码,演示如何根据一列内容的长度来进行排序: ```html <template> <el-table :data="tableData" :columns="tableColumns"> </el-table> </template> <script> export default { data() { return { tableData: [ { name: "John", age: 23, desc: "This is a long description" }, { name: "Mary", age: 25, desc: "Short" }, { name: "Bob", age: 30, desc: "Medium length" }, ], tableColumns: [ { prop: "name", label: "Name" }, { prop: "age", label: "Age" }, { prop: "desc", label: "Description", sorter: this.sortByLength }, ], }; }, methods: { sortByLength(rowA, rowB) { return rowA.desc.length - rowB.desc.length; }, }, }; </script> ``` 在上面的代码中,我们在 `tableColumns` 中为 `desc` 列设置了 `sorter` 函数,该函数比较两条数据的 `desc` 属性的长度,从而实现按照列内容长度进行排序的功能。 你可以根据自己的需求,定义不同的 sorter 函数来实现各种自定义排序规则。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值