场景:
上图中能够看到多个箭头都是选中成果
形容:
element-ui的el-table仅才反对单列(一个字段)进行排序,想要反对多列排序,首先要定义一个数组,用于寄存所有排序的字段及其程序,
设置列sortable=“custom”,联合sort-change事件,在点击排序箭头时进行排序操作
实现:
话不多说间接上代码,大家本人能够批改成合乎本人的业务:
<template> <el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" @sort-change="handleSortChange" :header-cell-class-name="handleHeaderCellClass" > <el-table-column prop="date" label="日期" sortable="custom" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" sortable="custom" width="180"> </el-table-column> </el-table></template><script> export default { data() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], orderArray: [] } }, methods: { //增加排序办法(可把多个字段独特退出排序) handleHeaderCellClass({ row, column, rowIndex, columnIndex }) { this.orderArray.forEach((element) => { if (column.property === element.prop) { column.order = element.order; } }); }, // 点击排序箭头 handleSortChange({ 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.orderArray就是最终排序后的汇合 console.log(this.orderArray ); }, } }</script>