table组件排序能够生效的条件是 el-table-column 中存在 sortable 属性
<el-table-column
prop="xxxx"
width="120"
sortable='custom'
label="xxx">
</el-table-column>
问题:使用sort-change事件,{ column, prop, order }中 获取到的 prop 不存在,导致页面排序失败
<el-table
:data="tableData"
@sort-change="sortChange"
style="width: 100%">
<el-table-column
sortable='custom'
label="测试"
width="180">
<template #default="scope">
<div>{{ scope.row.test }}</div>
</template>
</el-table-column>
</el-table>
sortChange({ column, prop, order }){
console.log('prop', prop) //prop不存在
}
问题原因:该el-table-column 使用了slot自定义内容插槽, el-table-column上面没有 prop属性,页面不会报错,但是会导致触发排序事件后 调用接口排序失效
解决方案:
使用sort-change事件时,相关排序的 el-table-column 上面必须包含 prop sortable 两个相关属性配置
<el-table
:data="tableData"
@sort-change="sortChange"
style="width: 100%">
<el-table-column
prop="test" //添加prop属性
sortable='custom' //添加sortable属性
label="测试"
width="180">
<template #default="scope">
<div>{{ scope.row.test }}</div>
</template>
</el-table-column>
</el-table>