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 @ 2024-07-03 10:31  jsxyrh  阅读(30)  评论(0编辑  收藏  举报