在vue3中使用Element Plus table的时候,用到了后端排序。然后想要实现排序图标的高亮。
1.先定义:@sort-change="handleSortChange" 这个排序方法
<el-table
ref="dataListRef"
:data="tableData"
@sort-change="handleSortChange"
:header-cell-style="getRowClass"
>
</el-table>
const handleSortChange = (column: any) => {
//先把要排序的字段放入变量中
state.queryForm.orderby = column.prop
//判断是正序还是倒序
switch (column.order) {
case 'ascending':
state.queryForm.sort = 'asc'
break
case 'descending':
state.queryForm.sort = 'desc'
break
case null:
state.queryForm.sort = ''
state.queryForm.orderby = ''
break
}
fetchThreadList()
}
2.然后再定义:header-cell-style="getRowClass" 这个实现排序图标高亮的方法
// 排序图标高亮
const getRowClass = ({ column }: any) => {
// 判断 列的名称 是否与 业务需要使用的字段 是否一致
if (column.property === state.queryForm.orderby) {
// 如果一致,将排序顺序赋值,或者从sortChange获取的动态数据填在这里
switch (state.queryForm.sort) {
case 'asc':
column.order = 'ascending'
break
case 'desc':
column.order = 'descending'
break
}
} else {
// 如果不一致,就清空该列的排序信息
column.order = ''
}
}
3.变量
const state = reactive({
queryForm: {
page: 1,
pageSize: 10,
total: null,
keyword: '',
statusId: '',
sourceId: '',
lastFollowDay: '',
becomeMember: true,
createAt: []
},
})