【elementUI】el-table多列排序（后端排序）、重置后清除排序

在Element UI的el-table组件中，可以通过设置sortable属性来实现列的排序功能。如果需要实现后端排序（即排序逻辑在服务器端处理），你需要监听sort-change事件，并在事件处理函数中发起API请求，并将排序参数传递给后端。

以下是一个简单的例子，展示了如何实现后端排序，并在重置过滤条件时清除排序：

<template>
  <div>
    <el-table
      :data="tableData"
      @sort-change="handleSortChange"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        prop="date"
        label="日期"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        sortable="custom"
      ></el-table-column>
    </el-table>
    <el-button @click="resetTable">重置排序和筛选条件</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [],
      currentSort: { prop: 'date', order: 'descending' }
    };
  },
  methods: {
    handleSortChange({ prop, order }) {
      this.currentSort = { prop, order };
      this.fetchData();
    },
    fetchData() {
      // 发起API请求，并将排序参数currentSort传递给后端
      console.log('Fetching data with sort:', this.currentSort);
      // 示例代码，实际中应该发起API请求
    },
    resetTable() {
      this.currentSort = { prop: 'date', order: 'descending' };
      this.fetchData(); // 重置后需要重新获取数据以清除排序
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

在这个例子中，handleSortChange方法会在用户更改排序时被调用，并更新currentSort对象。resetTable方法会将currentSort重置为默认值，并调用fetchData以重新获取数据。

请注意，你需要根据实际的后端API来发起请求，并传递正确的参数。在fetchData方法中，你应该使用Ajax请求（例如使用axios库）来与后端服务器进行通信。