插件 tree-transfer 选中父节点时,子节点不选中
时间: 2023-08-13 10:43:09 浏览: 128
对于 `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` 即可实现选中父节点时,子节点不被选中的效果。
阅读全文