elmentui表格修改可点击排序元素

一. 表头排序默认点击表头进行排序，禁止点击表头进行排序，只有点击排序图标的时候再进行排序，添加样式即可：

th {
      pointer-events: none;

      i {
        pointer-events: auto;
      }

}

二. 表格点击排序异步请求，表格数据刷新后，上一次点击的排序消失不见？

1. 存储上一次点击表格的排序字段

data(){

        return {

                activeSort: {} // 选中排序

        }

}

2. 为表头选中排序添加样式

<el-table :header-cell-class-name="headerCellClass"></<el-table>

methods: {

        headerCellClass({ row, column, rowIndex, columnIndex }) {
                if (column.property == this.activeSort.prop) {
                          return 'active-' + this.activeSort.order;
                }
         }

}

3. 添加已设置好的样式

::v-deep th.active-ascending .sort-caret.ascending,
::v-deep th.active-descending .sort-caret.descending {
      transform: scale(1.3);
}

点击表头切换排序

data() {
      return {
        activeSort: {} // 选中排序
      }
    },

methods: {

 // 排序
      handleSortChange(column) {
        // 手动更改排序
        if (this.activeSort.prop == column.prop) {
          column.order = this.activeSort.order == 'ascending' ? 'descending' : 'ascending';
        }
        this.activeSort = { prop: column.prop, order: column.order };
        this.$emit('handleSortChange', column);
      },

}