element table组件排序失效 sort-change中prop不存在，导致排序不生效_element sortchange bug

table组件排序能够生效的条件是 el-table-column 中存在 sortable 属性

<el-table-column
      prop="xxxx"
      width="120"
      sortable='custom'
      label="xxx">
 </el-table-column>
1
2
3
4
5
6

问题：使用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不存在
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

问题原因：该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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14