Element-Plus-表格后端排序
目录
Element Plus 表格后端排序
element 表格后端排序（element和element plus通用）
问题
element排序采用官方给出的方案，按部就班后的产生的问题是：给出的排序有三种状态，
descending
、
ascending
和
null
但是我只需要前面两种，目前的效果如下：
解决方法
使用两个变量分别保存上一次为null时的prop和 保存之前的排序状态，实现效果：
代码：
html：
<el-table
:data="dataObj.dataList"
ref="multipleTable"
slot="empty"
:height="tableHeight"
@sort-change="colChange"
:sort-orders="['ascending', 'descending']"
:default-sort="{prop: 'id', order: 'descending'}"
:cell-class-name="rowClass"
>js（vue3的写法）
const dataObj = reactive({
searchObj: {
id: '',
planName: '',
createUser: '',
status: undefined,
orderBy: 'id',
orderType: 'desc',
},
dataList: [],
searchPage: {
pageSize: 10,
pageNum: 1,
},
prevProp: 'id', // 保存上一次为null时的prop
saveSort: 'descending', // 保存之前的排序状态
}) // 排序
const colChange = ({column, prop, order}) => {
if (order && dataObj.prevProp !== prop) {
dataObj.prevProp = prop
}
if (!order) {
order = dataObj.saveSort === 'descending' ? 'ascending' : 'descending'
that.$refs.multipleTable.sort(dataObj.prevProp, order)
prop = dataObj.prevProp
}
dataObj.saveSort = order
dataObj.searchObj.orderBy = prop
dataObj.searchObj.orderType = dataObj.saveSort === 'descending' ? 'desc' : 'asc'
if (column) getDataList() // 获取数据的方法
}
// 重置
const resetData = () => {
dataObj.searchPage.pageSize = 10
dataObj.searchPage.pageNum = 1
dataObj.searchObj = {}
that.$refs.multipleTable.sort('id', 'descending')
}