ElementPlus 表格默认选中失效

早上不想起_

于 2022-03-23 10:47:38 发布

阅读量1.3k

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/qq_43371595/article/details/123679878

版权

在前端开发中，遇到Vue组件中表格与选择项联动的问题，通过$nextTick和setTimeout解决表格数据更新延迟问题。当尝试直接使用toggleRowSelection方法时，由于数据未即时更新，导致操作失效。通过检查表格长度，确保数据加载完成后，在两次$nextTick中分别清除原有选择并重新设置选中项，最后使用setTimeout作为保险，确保所有操作在DOM更新后执行，从而实现表格选中状态的正确联动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：需要标签和table选中做联动

选中标签
选中表格

proxy.$nextTick(() => {
checkStationTable.value.toggleRowSelection(item, undefined)
}）

同样为table绑定ref，首次进去为undefined，我们就判断一手他的length，正常来说上面这种就可以了，然鹅我这并不管用，然后用了uni中的终极办法，setTimeout,就OK了

if (checkStationTable.value.length != 0) {
    checkStationTable.value.clearSelection()
    proxy.$nextTick(() => {
      data.stationArr.forEach((item, index) => {
        let stationIndex = arr.findIndex((item1) => item.station_uid == item1.station_uid)
        if (stationIndex == -1) {
          item.checkUserUid = ''
        }
      })
    })
    setTimeout(() => {
      proxy.$nextTick(() => {
        arr.forEach((item) => {
          checkStationTable.value.toggleRowSelection(item, undefined)
        })
      })
    }, 1000)
  }