el-table回显默认勾选-弹窗

366 阅读1分钟

由于是弹窗,是父子组件,之前使用[watch监听]但是无法初始化已选择

要使用nextTick方法+element表格中的toggleRowSelection()方法

记得在table标签中添加ref <el-table v-loading="loading" border ref="multipleTable" @row-click="handleSelectionChange">

 created() {
      this.initAlreadySelectItem()
    },
       // 初始化已选中的信息
      initAlreadySelectItem() {
        if (!this.detectionData) {
          return
        }
        let alreadySelectIds = this.detectionData.map(e => e.detectionInfoId)
        let detectionDataIdObj = {}
        this.detectionData.forEach((item, i) => {
          detectionDataIdObj[item.detectionInfoId] = item.multiple
        })
        let needToggleList = this.DetectionInfoList.filter(item => alreadySelectIds.includes(item.id))
        if (needToggleList && needToggleList.length > 0) {
          needToggleList.forEach((v, i) => {
            this.$set(v, 'multiple', detectionDataIdObj[v.id])
            // v.multiple = detectionDataIdObj[v.id]
            this.$nextTick(() => this.$refs.multipleTable.toggleRowSelection(v, true))
          })
        }
      },