vue3+ts利用el-table实现自定义排序事件

说明

在项目开发中，需求有时会需要通过调取接口去实现表格数据排序。

实现要点

• 在el-table-column中定义sortable="custom"属性
• 在el-table中定义@sort-change="自定义排序事件"

代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

... <el-table     :data="list"     @sort-change="handleSort"     ref="tableRef" >   <el-table-column     label="价格"     prop="price"     sortable="custom"   />   <el-table-column     label="总库存"     prop="totalStocks"     sortable="custom"    /> </el-table> ...   // 自定义排序事件  function handleSort(sortItem: any) {   // 处理sortItem {column:'列信息',order:'ascending(升序)|descending(降序)',prop:'分类属性名'} }   // 重置排序事件 function resetSort() {   const tableRef = ref();   tableRef.value && tableRef.value.clearSort(); }