排序: 点击上箭头 点击下箭头
点击表头单元格,有个排序顺序 :sort-orders=“sortOrders” 默认是3个状态顺序切换 “ascending”、“descending” 、null
sortOrders: [null], // 点击表头,只触发清除此列排序状态
<template>
<el-table-column v-bind="{ ...$props, ...$attrs}" :class-name="getSortClass(prop)">
<template slot-scope="scope">
<keep-alive>
<component
:is="template"
v-clipboard:[canCopy]
v-bind="{...$props, ...$attrs}"
:scope="scope"
/>
</keep-alive>
</template>
</el-table-column>
</template>
getSortClass(key) {
const sort = this.sortCondition
if (!sort.length) return 'disorder'
if (sort.indexOf('+' + key) >= 0) {
return 'ascending'
}
if (sort.indexOf('-' + key) >= 0) {
return 'descending'
}
return 'disorder'
}
// 列排序
// 数组记录列及其列的排序规则
onSortChange({ column, prop, order }) {
if (!prop) return
const sort = this.sortCondition
if (!order && !sort.length) return
// 如果是清除排序,且无升降排序,应不触发排序
const index = sort.findIndex(v => /^(\+|\-).*$/.test(v))
if (index < 0 && !order) return
sort.length = 0 // 目前仅支持单列排序
// let index = sort.indexOf('+' + prop)
// if (index !== -1) {
// sort.splice(index, 1)
// }
// index = sort.indexOf('-' + prop)
// if (index !== -1) {
// sort.splice(index, 1)
// }
if (order === 'ascending') {
sort.push('+' + prop)
}
if (order === 'descending') {
sort.push('-' + prop)
}
console.log('sort:', this.sortCondition)
// return
this.fetchData(1)
}