ElementUI el-table 子节点选中后为什么没有打勾？

你在学习文章相关的知识吗？本文《ElementUI el-table 子节点选中后为什么没有打勾？》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

elementui el-table子节点选中后没有打勾？

当您在elementui的el-table中选择子节点时，但没有出现打勾效果，可能是以下原因造成的：

在 element-ui 版本 2.15.7 中存在这个问题，升级到最新版本 2.15.13 即可解决。

除此之外，请确保您遵循了以下步骤：

1. 在表格中指定 selection-change 事件处理器，以响应子节点选中。
2. 在事件处理器中，使用 $refs.table.togglerowselection(row, true) 方法手动勾选子节点。

代码示例：

<el-table :data="customlist" @selection-change="handleselectionchange">
  <el-table-column type="selection" width="55" align="center"></el-table-column>
</el-table>

handleselectionchange(selection) {
  selection.foreach((row) => {
    this.$refs.table.togglerowselection(row, true);
    if (row.children && row.children.length) {
      row.children.foreach((childrow) => {
        this.$refs.table.togglerowselection(childrow, true);
      });
    }
  });
}

如果您使用的是 tree-props，请确保为 children 指定一个唯一的属性，否则无法正确选择和勾选子节点。

<el-table :data="customList" @selection-change="handleSelectionChange" :tree-props="{children: 'children'}">
  <el-table-column type="selection" width="55" align="center"></el-table-column>
</el-table>

handleSelectionChange(selection) {
  selection.forEach((row) => {
    this.$refs.table.toggleRowSelection(row, true);
    if (row.children && row.children.length) {
      row.children.forEach((childRow) => {
        this.$refs.table.toggleRowSelection(childRow, true);
      });
    }
  });
}

以上步骤按照要求进行后，就可以为elementui el-table中的子节点选取行为显示打勾效果。希望这能解决您的问题。

理论要掌握，实操不能落！以上关于《ElementUI el-table 子节点选中后为什么没有打勾？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！