element table组件排序失效 sort-change中prop不存在,导致排序不生效

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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值