vue3+ts+element-plus的表格的多选框默认选中不生效?

作者站长头像
站长
· 阅读数 15

获取的表格数据以后就根据返回的enable这个字段判断是否选中vue3+ts+element-plus的表格的多选框默认选中不生效?vue3+ts+element-plus的表格的多选框默认选中不生效?

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 这个是获取到数据以后调用这个方法
const toggleSelection = (rows: any) => {
  rows.forEach((row: any) => {
    multipleTableRef.value!.toggleRowSelection(row,undefined)
  })
}
// 这是获取表格的数据
const getRuleManageData = () => {
  RuleManage().then(res => {
    if(res.code === 200) {
      listLoading.value = false
      tableData.value = res.data.rules
    // 在这里调用
      toggleSelection(res.data.rules)
    }
  })
}

这样写不生效,是什么原因呢?各位大佬指教一下

<el-table
  ref="multipleTableRef"
  :data="tableData"
  style="width: 100%"
  @selection-change="handleSelectionChange"
  :show-header="false"
  stripe
  size="default"
>
  <el-table-column type="selection" width="55"/>
  <el-table-column property="name" width="200" />
  <el-table-column property="desc" />
</el-table>
回复
1个回答
avatar
test
2024-07-11

得等界面渲染完成再选中

const getRuleManageData = () => {
  RuleManage().then(res => {
    if(res.code === 200) {
      listLoading.value = false
      tableData.value = res.data.rules
      // 在这里调用
      nextTick(() => toggleSelection(res.data.rules))
    }
  })
}

参考这个Demo

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容