element的tree默认选中父级但是不勾选全部的子级
时间: 2023-10-15 15:02:08 浏览: 77
您可以通过设置tree组件的props中的"checkStrictly"属性为true来实现只选中父级节点但不勾选全部子级节点的效果。同时,您还需要在tree的节点数据中给每个节点添加一个属性"checked"来标识该节点是否被选中。具体实现可以参考以下代码:
```html
<template>
<el-tree
:data="treeData"
show-checkbox
:check-strictly="true"
v-model="checkedKeys"
:default-expand-all="true"
></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: "父节点1",
children: [
{
id: 11,
label: "子节点1-1",
checked: false
},
{
id: 12,
label: "子节点1-2",
checked: false
}
],
checked: false
},
{
id: 2,
label: "父节点2",
children: [
{
id: 21,
label: "子节点2-1",
checked: false
},
{
id: 22,
label: "子节点2-2",
checked: false
}
],
checked: false
}
],
checkedKeys: []
};
}
};
</script>
```
在上面的代码中,我们设置了tree组件的props中的"show-checkbox"属性为true,以显示复选框;"check-strictly"属性为true,以实现只选中父级节点但不勾选全部子级节点的效果。同时,我们在每个节点数据中添加了一个"checked"属性,用于标识该节点是否被选中。在v-model中绑定"checkedKeys"变量,以获取选中的节点的key值。