在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];
            }
        }