1

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>

charlotteeeeeee
74 声望7 粉丝