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

说明

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

实现要点

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

代码

...
<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();
}