Tree——选中父节点时所有子节点也被选中

添加下面那个方法即可实现(蓝色标记部分为自己定义的树的名称)

// 当选中父节点时,让其子节点相应选中
               contacterTree.on('checkchange', function(node, checked) {  
                node.expand();  
                node.attributes.checked = checked;  
                node.eachChild(function(child) {  
                    child.ui.toggleCheck(checked);  
                    child.attributes.checked = checked;  
                    child.fireEvent('checkchange', child, checked);  
                });  
            }, contacterTree);   

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 `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` 即可实现选中父节点子节点不被选中的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值