Element el-table的@current-change事件在切换分页的时候,获取到的currentRow为null

今天项目中遇到一个棘手的问题,想要实现的功能如下图
实现的功能是在左侧主表中选中某一行,右侧表格展示该行第二列的详细内容
如果要获取到当前选中行的内容,首先要使用el-table的@current-change事件,事件中的currentRow参数即选中内容
current-chang事件描述
问题现象
项目中出现的问题现象是,在第一页切换每一行都正常,右侧详细内容也能显示。但当选中某一行,点击分页的时候,就会报错。
分页内容
报错原因:
经过问题排查,发现当切换分页,触发了el-pagination的@current-change事件
el-pagination的current-change事件
这个事件中的 “initList()" 根据当前页码重新加载了表格数据,表格数据发生了变化,因此当前表格选中的行肯定也发生了变化,所以又自动触发了el-table的@current-change事件。但是跳转到第二页的时候,并没有任何行选中,所以获取不到当前选中行的内容,所以这个事件的currentRow参数为null,也就导致了后续给右侧表格赋值时候报错的问题。
解决办法:
直接在el-table的@current-change事件中判断currentRow是否有内容,如果有内容存在再进行接下来的操作

注意
另外在选中当前行对其进行修改保存的时候,保存成功之后仍然需要手动选中该行
currentRow(currentRow, oldCurrentRow) {
if (currentRow) {
this.catch.currentRow = currentRow
}
},
if (this.catch.currentRow && this.LeftList.indexOf(c => c.ID == this.catch.currentRow.ID) >= 0) {
this.$refs.leftTable.setCurrentRow(this.catch.currentRow)
}
修改保存时,this.catch.currentRow用于存放之前选中的行内容,如果currentRow存在,并且左侧列表中某一行的id和currentRow中一致的id一致,则选中该行。选中某一行时,this.catch.currentRow用于存放当前行的内容

  • 11
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值