[JavaScript知识库]elementUi的树组件设置半选状态的方法（vue前端框架下）

elementUi的树组件设置半选状态的方法（vue前端框架下）

直接上代码

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script>
<div id="app">
<el-tree     
  :props="props"
  :load="loadNode"
  :node-click="my"       
  lazy
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>
</div>
//这里如果引入不了不用太在意
@import url("//unpkg.com/element-ui@2.15.3/lib/theme-chalk/index.css");
var Main = {
    data() {
      return {
        props: {
          label: 'name',
          children: 'zones'
        },
        count: 1
      };
    },
    methods: {
      handleCheckChange(data, checked, indeterminate) {
        console.log(data.name,checked);
        // console.log();
        // console.log(data, checked, indeterminate);
      },
      my(data,node) {
        console.log("设置半选状态");
        node.indeterminate = true;
      },
      loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region1' }, { name: 'region2' }]);
        }
        if (node.level > 3) return resolve([]);

        var hasChild;
        if (node.data.name === 'region1') {
          hasChild = true;
        } else if (node.data.name === 'region2') {
          hasChild = false;
        } else {
          hasChild = Math.random() > 0.5;
        }

        setTimeout(() => {
          var data;
          if (hasChild) {
            data = [{
              name: 'zone' + this.count++
            }, {
              name: 'zone' + this.count++
            }];
          } else {
            data = [];
          }

          resolve(data);
        }, 500);
    //重要的是这段代码
        console.log("设置半选状态");
        node.indeterminate = true;
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

功能实现的代码

//注意这样可以设置当前操作的节点为半选状态
//但是在子父关联的情况下（check-strictly为false）如果这个节点被展开，
//且子节点中没有被选中的状态，或者全为选中半选状态会自动变为未选中和全选中
node.indeterminate = true;

个人也是被启发也可以看看这个博主写的，个人觉得很详细，遇到的问题和这个博主一样，找了很久

借鉴博文

简单上一下实现的效果，可以看到没有子节点或者节点没展开的情况下是可以的