elementUI的table的checkbox的toggleSelection回显问题

Question

this.$nextTick(() => {
          //  通过for循环得到的结果只有第一条数据被选中，后面本来choiced=true的数据也变成了false
          for (let i = 0; i < this.infoForm.declaration.length; i++) {
            if (this.infoForm.declaration[i].choiced === true) {
              console.log(this.infoForm.declaration[i])
              this.$refs.declarationTableRef.toggleRowSelection(this.infoForm.declaration[i])
            }
          }
          //  直接设置的话没有问题
          this.$refs.declarationTableRef.toggleRowSelection(this.infoForm.declaration[0])
          this.$refs.declarationTableRef.toggleRowSelection(this.infoForm.declaration[1])
          this.$refs.declarationTableRef.toggleRowSelection(this.infoForm.declaration[2])
          console.log(this.infoForm.declaration)
        })

Answer 1

下午好🌅🌅🌅
本答案参考ChatGPT-3.5

问题分析： 根据代码可以看出，使用Element UI的Table组件中的checkbox选择功能，希望在页面回显时自动选中已经选中的数据。但是通过for循环遍历的方式进行回显时，只有第一条数据被成功选中，后面的数据都变成了未选中的状态。而直接使用toggleRowSelection进行回显时，没有问题。

解决方案： 经过排查，可能是在进行遍历时，由于异步操作的原因，无法正常选中数据。可以尝试使用$nextTick方法延迟执行回调函数，保证DOM更新完成后再进行操作。

1. 使用$nextTick方法包裹回显逻辑：

this.$nextTick(() => {
  for (let i = 0; i < this.infoForm.declaration.length; i++) {
    if (this.infoForm.declaration[i].choiced === true) {
      this.$nextTick(() => {
        this.$refs.declarationTableRef.toggleRowSelection(this.infoForm.declaration[i])
      })
    }
  }
})

1. 使用async/await保证异步操作完成：

this.$nextTick(async () => {
  for (let i = 0; i < this.infoForm.declaration.length; i++) {
    if (this.infoForm.declaration[i].choiced === true) {
      await this.$refs.declarationTableRef.toggleRowSelection(this.infoForm.declaration[i])
    }
  }
})

注意事项： 确保infoForm.declaration数组中的数据有正确的choiced属性值； 确保declarationTableRef引用正确，且在组件中正确声明ref属性。

以上是解决问题的思路和代码示例，希望能对你有帮助！