一.?表头排序默认点击表头进行排序，禁止点击表头进行排序，只有点击排序图标的时候再进行排序，添加样式即可：
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);
}
|