element plus tree组件实现父级影响子级，子级不影响父级

最新推荐文章于 2025-05-16 17:16:00 发布

原创最新推荐文章于 2025-05-16 17:16:00 发布 · 714 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了 Element UI 中的树形控件 (el-tree) 的使用技巧，特别是如何实现严格的父子节点检查状态分离，并提供了自定义设置父节点对子节点影响的方法。通过实例展示了如何避免默认选中项对节点勾选事件的影响。

接看代码

<el-tree
 :data="dataList"
 ref="elTreeRef"
 node-key="id"
 :props="treeProps"
 show-checkbox
 :check-strictly="true"
 :default-checked-keys="checkedKeys"
 @check="check"
/>

function check(data, node) {
   const isCheck = node.checkedKeys.includes(data.id)
   setChilrenStatus(data, isCheck)
}
function setChilrenStatus(data, checked) {
    elTreeRef.value?.setChecked(data.id, checked, true)
    const children = data.children
    if (children.length) {
      children.forEach((item) => {
        findChilren(item, checked)
      })
    }
}

说些关键点

1、:check-strictly="true" 使子级和父级不相关

2、@check="check" 不能用check-change 会受default-checked-keys影响

3、setChilrenStatus手动控制父级对子级的影响