Element Plus 表格重置排序状态

背景

需求描述：表格中几个字段增加排序功能，点击搜索区域 重置 按钮重置状态。

依赖版本

• element-plus: 2.7.5
• vue: 3.4.21
• vite: 5.1.4
• node: >=16.0.0

实现

1. 在需要排序的字段属性上增加 sortable：custom

{
  prop: "createTime",
  label: "创建时间",
  align: "center",
  minWidth: 160,
  sortable: "custom"
},

2. 在表格组件上增加sort-change方法用于获取用户操作排序的后续操作

<el-table
  ref="proTable"
  row-key="id"
  :columns="columns"
  @sort-change="sortChange"
>
</el-table>

自定义 sortChange 根据业务需要获取数据

const sortChange = (data: any) => {
  const { order, prop } = data;
  let orderType = "";
  if (order == "ascending") {
    orderType = "asc";
  } else if (order == "descending") {
    orderType = "desc";
  }
  // 请求接口，获取数据
  ...
};

3. 在搜索区域的重置方法中重置排序状态

const searchReset = () => {
  proTable.value.store.clearSort();
};