在element-ui table中處理 多列排序，箭頭高亮

前言

最近在處理element-ui表格的時候，有這麼一個需求，在表格那裏實行多列表頭高亮排序，查看了一下官網，發現目前尚未相關的配置，只能本身手動配置修改
大概實現的效果是以下

看了一下文檔介紹，發現能夠經過結合header-cell-style和sortChange能夠實現這個效果

代碼實現

<el-table
            class=""
            :data="tableData"
            :height="height"
            :class="tableClass"
            v-loading="loading"
            element-loading-text="拼命加載中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.2)"
            @sort-change="sortChange"
            :stripe="stripe"
            @row-dblclick="rowDblclick"
            :header-cell-style="handleTheadStyle"
        >
        </el-table>

export default {
    data() {
        return {
            activeThead: {} //保存所選擇的表頭
        };
    },
 props: {
        mutilSort: {
            default: true
        },
     }

methods:{
   sortChange(obj) {
            this.$emit("sort-change", obj);
            /**
             * 很少列排序，不往下執行
             */
            if (!this.mutilSort) return;
            if (obj.order) {
                this.activeThead[obj.prop] = obj.order;
            } else if (!obj.order) {
                this.activeThead[obj.prop] = "";
            }
        }
   },
  
      /**
         * 設置表頭排序
         */
      handleTheadStyle({ row, column, rowIndex, columnIndex       }) {
            /**
             * 很少列排序，不往下執行
             */
            if (!this.mutilSort) return;
            if (this.activeThead[column.property]) {
                column.order = this.activeThead[column.property];
            }
        }