1.单个排序：
template:
<el-table
@sort-change="sortHandler">
<el-table-column
label="label"
prop="replicas"
:sort-orders="['ascending', 'descending', null]" />
</el-table>
data:
orderArray: [],
methods:
// 单个排序
sortHandler({ column, prop, order }) {
if (order) {
this.orderArray = [{ prop: prop, order: order,},];
} else {
this.orderArray = [];
}
this.query();
},
2.组合排序
template:
<el-table
:header-cell-class-name="headerCellClassHandler"
@sort-change="sortHandler">
<el-table-column
label="label"
prop="replicas"
sortable="custom"
:sort-orders="['ascending', 'descending', null]" />
</el-table>
data:
orderArray: []
methods:
headerCellClassHandler({ row, column, rowIndex, columnIndex }) {
this.orderArray.forEach((element) => {
if (column.property === element.prop) {
column.order = element.order;
}
});
},
// 组合排序
sortHandler({ column, prop, order }) {
if (order) {
// 参与排序
let flagIsHave = false;
this.orderArray.forEach((element) => {
if (element.prop === prop) {
element.order = order;
flagIsHave = true;
}
});
if (!flagIsHave) {
this.orderArray.push({
prop: prop,
order: order,
});
}
} else {
// 不参与排序
this.orderArray = this.orderArray.filter((element) => {
return element.prop !== prop;
});
}
this.query();
},
