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

猿如意

已于 2023-11-06 17:18:26 修改

阅读量5.2k

点赞数 4

文章标签： elementui 前端 javascript vue.js vue

于 2023-10-31 14:35:26 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37485170/article/details/134138801

版权

系列文章目录

文章目录

前言

业务需求el-table 需要支持多列排序，后端排序。即就是在点击后重新发送请求，点击一列的排序，另一列的排序样式能够保留，但是el-table默认是单列（一个字段）排序。点击一列排序，另一列排序自动消失

一、解决方案

想要支持多列排序，首先要定义一个数组，用于存放所有排序的字段及其顺序，
设置列sortable=“custom”，结合sort-change事件header-cell-class-name属性，在点击排序箭头时进行排序操作

二、使用步骤

1.el-table添加属性和事件

代码如下：

<el-table
      ref="opn_table"
      :data="tableData"
      :loading="table_loading"
      row-key="id"
      :header-cell-class-name="handleHeaderClass"
      @sort-change="sortChange"
      >
      <el-table-column
        prop="firstSubmitTime"
        label="提交时间"
        sortable="custom"
        align="center"
        width="150">
        <template slot-scope="scope">
          <span>{{
            scope.row.firstSubmitTime
              ? formatDates(scope.row.firstSubmitTime)
              : ''
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="auditTime"
        label="审核时间"
        sortable="custom"
        align="center"
        >
      </el-table-column>
</el-table>

2.添加数组，存储排序数据

代码如下：

<script>
  export default {
    data() {
      return {
        tableData: [],
        ordersList: [],

      }
    },
    methods: {
      // 排序
      sortChange({ column, prop, order }) {
        console.log(column, prop, order);
        // 有些列不需要排序，提前返回
        if (column.sortable !== 'custom') {
          return;
        }
        column.multiOrder = order;
        this.handleOrderChange(column.property, column.multiOrder);
      },
      handleOrderChange(orderColumn, orderState) {
        let result = this.ordersList.find((e) => e.orderColumn === orderColumn);
        if (result) {
          result.orderState = orderState;
        } else {
          this.ordersList.push({
            orderColumn: orderColumn,
            orderState: orderState,
          });
        }
       // 调接口查询，在传参的时候把ordersList进行处理成后端想要的格式
        console.log('this.ordersList : 排序列', this.ordersList);
        this.getData();
      },
      // 设置列的排序为我们自定义的排序
      handleHeaderClass({ column }) {
        column.order = column.multiOrder;
      },
    }
  }
</script>

3.查询和重置清除排序选项和ordersList

代码如下：

/**
       * @description:清除排序
       */
      resetOrder() {
        this.$refs.opn_table.clearSort();
        let columns = this.$refs.opn_table.columns;
        columns.forEach((column) => {
          if (column.sortable == 'custom') {
            column.order = undefined;
            column.multiOrder = undefined;
          }
        });
        this.ordersList = [];
      },