<el-tree @node-click="materialSelect" node-key="dicValue" ref="treeForm" @check-change="handleNodeClick" show-checkbox check-strictly :data="projectEngineType" :props="categoryProps"> 加了show-checkbox check-strictly仍不能多选
时间: 2023-08-07 09:12:50 浏览: 127
如果在 `<el-tree>` 组件中添加了 `show-checkbox` 和 `check-strictly` 属性,但是仍然无法实现多选功能,可能是因为还需要在 `handleNodeClick` 方法中进行一些额外的处理。
请尝试在 `handleNodeClick` 方法中更新 `setCheckedKeys` 方法的调用方式,以实现多选功能。以下是一个示例代码:
```javascript
handleNodeClick(data, checked, node) {
if (checked === true) {
// 获取当前选中节点的所有子节点的字典值
const checkedKeys = [];
const traverseChildren = (children) => {
children.forEach(child => {
checkedKeys.push(child.dicValue);
if (child.children && child.children.length > 0) {
traverseChildren(child.children);
}
});
};
traverseChildren(data.children);
// 将当前节点的字典值也加入选中数组
checkedKeys.push(data.dicValue);
this.$refs.treeForm.setCheckedKeys(checkedKeys);
} else {
// 取消选中当前节点及其所有子节点
const uncheckedKeys = [];
const traverseChildren = (children) => {
children.forEach(child => {
uncheckedKeys.push(child.dicValue);
if (child.children && child.children.length > 0) {
traverseChildren(child.children);
}
});
};
traverseChildren(data.children);
// 将当前节点的字典值也加入取消选中数组
uncheckedKeys.push(data.dicValue);
this.$refs.treeForm.setCheckedKeys(uncheckedKeys, false);
}
this.onSubmit();
},
```
在这个示例中,我们通过递归遍历当前节点的所有子节点,将它们的字典值添加到一个数组中。然后,将当前节点的字典值也添加到相应的数组中。最后,调用 `setCheckedKeys` 方法来设置选中或取消选中这些节点。
希望这个示例能够解决你的问题。如果还有其他疑问,请随时提问。
阅读全文