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 子节点选中后为什么没有打勾？的详细内容，更多请关注米云其它相关文章！