Vue3+element-plus:table表格设置反选，this.$refs.XXX.toggleRowSelection失效，

最新推荐文章于 2024-07-30 16:03:10 发布

?425

最新推荐文章于 2024-07-30 16:03:10 发布

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_56204435/article/details/131042933

版权

- 实现效果：

表格选择状态回显

反选失败原因及修正：

1、tab页循环，打印this.$refs可以看出是个数组，所以要加上对应的索引

2、this.$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。（注意this指向）

        <el-tabs tab-position="left" v-model="activeName" class="demo-tabs" @tab-change="handleNodeClick">
          <el-tab-pane 
          v-for="item in setTree"
          :key="item.sttp"
          :label="item.label"
          :name="item.sttp"
          >
          <div class="table jobdialog">
          <!-- 表格 -->
          <div style="margin-right:20px;">
            <el-table :data="ModelTableData"
              ref="modelParamsRefs"
              height='450px' style="width: 100%; font-size: 16px; border: 1px solid #e2e0e0;"
              @selection-change="handleSelectionChange">
                            <template v-slot:empty>
                              <img alt="" src="../../../public/common/nothingMild.png">
                              <p style="color: #969799;">暂无数据</p>
                            </template>
                            <el-table-column type="selection" width="55" />
                            <el-table-column :show-overflow-tooltip="true" align="center" label="参数名称" prop="name"
                                             width="auto">
                            </el-table-column>
                            <el-table-column :show-overflow-tooltip="true" align="center" label="参数范围"
                                             width="150">
                              <template #default="scope">
                                <span>{{scope.row.min }}- {{scope.row.max}}</span>
                                <!-- <span v-if="scope.row.fw=='-99999~-99999'">--</span>
                                <span v-else>{{ scope.row.fw }}</span> -->
                              </template>
                            </el-table-column>
                            <el-table-column :show-overflow-tooltip="true" align="center" label="参数类型" prop="datatype"
                                             width="100">
                          </el-table-column>
                          <el-table-column :show-overflow-tooltip="true" align="center" label="参数默认值" prop="defaultval"
                                             width="150">
                          </el-table-column>
                            <el-table-column align="center" label="参数值" width="120" prop="val">
                              <template #default="scope">
                                <!-- <el-input v-model="scope.row.paradefault"/> -->
                                <p>
                                  <el-input
                                      v-model="scope.row.val" @change="changeVal(scope.$index,scope.row)"/>
                                </p>
                              </template>
                            </el-table-column>
                            <el-table-column :show-overflow-tooltip="true" align="center" label="参数说明" prop="desc"
                                             width="200">
                            </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>

解决之后的代码

_this.$nextTick(()=>{
  flowparaarr.mskIndex.forEach((ele,index)=>{
  _this.$refs.modelParamsRefs[this.sttp-1].toggleRowSelection(this.ModelTableData[ele],true)
   })
})