elementui el-tree 勾选/取消勾选:子级关联,父级不关联

:check-strictly="true" 父子不关联,在方法里处理子级关联逻辑
setChecked方法需要定义node-key="id"
复制代码
<el-tree
    ref="tree"
    :data="treeData"
    :props="defaultProps"
    default-expand-all
    highlight-current
    :expand-on-click-node="false"
    :check-strictly="true"
    node-key="id"
    show-checkbox
    class="JNPF-common-el-tree"
    @check-change="handleCheckChange">
  <span class="custom-tree-node" slot-scope="{ data, node }" :title="data.groupName">
    <span class="text" :title="data.groupName">{{ node.label }}</span>
  </span>
</el-tree>

data() {
  return {
    treeData: [],
    defaultProps: {
      children: 'child',
      label: 'groupName',

    },
  }
},
复制代码
复制代码
// 点击勾选框
handleCheckChange(data, checked) {
  this.$refs.tree.setChecked(data, checked)
 //勾选/取消勾选:子级关联,父级不关联
  if (data.child && data.child.length > 0) {
    this.changeChildrenFun(data.child, checked)
  }
},
changeChildrenFun(data, checked) {
  data.forEach(item => {
    this.$refs.tree.setChecked(item, checked)
    if (item.child && item.child.length > 0) {
      this.changeChildrenFun(item.child, checked)
    }
  })
},
复制代码

 

posted @   jsxyrh  阅读(518)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
点击右上角即可分享
微信分享提示