关于前端:elementui-eltree-树组件子组件全不选的时父组件半选

36次阅读

共计 848 个字符,预计需要花费 3 分钟才能阅读完成。

element-ui 的树组件勾选状态反对:

1:父组件勾选(全选),所有子节点全选
2:子节点不全选,父组件半选
3:子节点全不选,父组件不可选
4:树组件设置 check-strictly=true,勾销父子节点的勾选关联(没有半选状态)

如果要实现子组件全不选,父节点半选

<template>
  <div>
    <el-tree
              ref="tree"
              class="tree"
              :data="treedata"
              show-checkbox
              node-key="id"
              highlight-current
              @check-change="checkNode"
            />
  </div>
</template>
<script>
export default {data(){
    return{
      treedata:[{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }]
    }
  },
  methods:{checkNode(a, b, c) {var treedata = this.$refs.tree.getNode(a)
      if(!anode.checked){this.getchild(treedata.parent)
      }
    },
    getchild(current) {var child = this.$refs.tree.getNode(current)
      if (!child.isLeaf) {
      // 如果是不是子节点,则设置为半选
        child.indeterminate = true
        child.checked = true
      }
    },
  }
}
</script>

正文完
 0