树状图父节点关联子节点,子节点选中不影响父节点怎么使用el-tree实现
时间: 2023-05-25 10:02:03 浏览: 54
可以通过el-tree提供的属性来实现此功能。使用check-strictly属性来控制父节点和子节点之间的关联,它可以使子节点选中不影响其父节点的选中状态。另外,设置node-key属性可以确保父节点和子节点具有相同的键,方便操作。以下是一个示例代码:
```html
<el-tree :data="data" :check-strictly="true" node-key="id"></el-tree>
```
其中,data为树状图的数据源,id为节点的唯一标识符。设置check-strictly为true后,父节点和子节点之间的关联就会变得严格,选中子节点不会影响父节点的选中状态。同时,通过设置相同的node-key,也能够轻松获取选中的节点信息。
相关问题
tree-transfer 选中父节点时,子节点不选中
在 `tree-transfer` 中,如果你希望选中父节点时,子节点不被选中,可以通过自定义 `render-content` 来实现。
具体步骤如下:
1. 在 `tree-transfer` 中添加 `:render-content` 属性,将其值设置为一个函数,用于自定义节点的渲染方式。
```html
<el-tree-transfer
:data="data"
:render-content="renderContent"
:props="{
key: 'id',
label: 'name',
children: 'children'
}">
</el-tree-transfer>
```
2. 在 `renderContent` 函数中,判断该节点是否为父节点,如果是,则将其子节点的勾选状态设为 `false`。
```javascript
methods: {
renderContent(h, { node, data, store }) {
const { checkedKeys } = store.props
const isChecked = checkedKeys.indexOf(data.id) !== -1
return (
<span class="custom-tree-node">
<el-checkbox
class="custom-tree-checkbox"
checked={isChecked}
onChange={() => {
store.setChecked(data, !isChecked)
if (node.isParent) {
node.childNodes.forEach(childNode => {
store.setChecked(childNode.data, false)
})
}
}}>
</el-checkbox>
{data.name}
</span>
)
}
}
```
在 `renderContent` 函数中,首先判断该节点是否被选中,然后返回一个包含 `el-checkbox` 和节点名称的 `span` 元素。
在 `el-checkbox` 的 `onChange` 事件中,首先调用 `store.setChecked` 方法来更新节点的勾选状态,然后判断该节点是否为父节点,如果是,则将其子节点的勾选状态设为 `false`。
这里通过 `node.isParent` 属性来判断是否为父节点,通过 `store.setChecked` 方法来设置子节点的勾选状态。在本例中,将子节点的勾选状态设置为 `false` 即可实现选中父节点时,子节点不被选中的效果。
插件 tree-transfer 选中父节点时,子节点不选中
对于 `tree-transfer` 插件,如果你希望选中父节点时,子节点不被选中,可以通过自定义 `render-content` 来实现。
具体步骤如下:
1. 在 `tree-transfer` 中添加 `:render-content` 属性,将其值设置为一个函数,用于自定义节点的渲染方式。
```html
<el-transfer
:data="data"
:render-content="renderContent"
:props="{
key: 'id',
label: 'name',
children: 'children'
}">
</el-transfer>
```
2. 在 `renderContent` 函数中,判断该节点是否为父节点,如果是,则将其子节点的勾选状态设为 `false`。
```javascript
methods: {
renderContent(h, { node, data, store }) {
const { checkedKeys } = store.props
const isChecked = checkedKeys.indexOf(data.id) !== -1
return (
<span class="custom-tree-node">
<el-checkbox
class="custom-tree-checkbox"
checked={isChecked}
onChange={() => {
store.setChecked(data, !isChecked)
if (node.isParent) {
node.childNodes.forEach(childNode => {
store.setChecked(childNode.data, false)
})
}
}}>
</el-checkbox>
{data.name}
</span>
)
}
}
```
在 `renderContent` 函数中,首先判断该节点是否被选中,然后返回一个包含 `el-checkbox` 和节点名称的 `span` 元素。
在 `el-checkbox` 的 `onChange` 事件中,首先调用 `store.setChecked` 方法来更新节点的勾选状态,然后判断该节点是否为父节点,如果是,则将其子节点的勾选状态设为 `false`。
这里通过 `node.isParent` 属性来判断是否为父节点,通过 `store.setChecked` 方法来设置子节点的勾选状态。在本例中,将子节点的勾选状态设置为 `false` 即可实现选中父节点时,子节点不被选中的效果。