el-table勾选列表项之后切换页面回来再反选操作

首先在el-table组件上设置:row-key属性

然后给:row-key添加一个事件

:row-key="getRowKey"

然后在methods方法中写入

getRowKey(row) { 
  return row.id 
}

然后再到el-table组件中找到设置type为selection那一项< el-table-column >

添加上

:reserve-selection=“true”

数据更新后保留之前选中的数据

之后在切换页面发送请求之后,拿到新数据后添加操作(分页器切换页面时)

 this.$nextTick(() => {
   if (selectedArray && selectedArray.length > 0) {
     selectedArray.forEach(element => {
       this.$refs.你的el-table组件的ref实例.toggleRowSelection(element)
     })
   }
 })

然后在销毁组件时,使用this.$refs.xxx.clearSelection() 清除表格元素中的选中数据,避免下次使用toggleRowSelection方法时重复添加

猜你喜欢

转载自blog.csdn.net/szw2377132528/article/details/128288524