vue2中el-tree的多选框

在Vue2中，可以使用element-ui的el-tree组件实现多选框。通过设置show-checkbox属性为true，可以在每个节点前添加一个复选框。然后可以使用check-change事件来监听勾选状态的改变，并通过refs获取勾选的节点数据。

在给el-tree绑定的check-change事件中，可以通过this.$refs.tree.getCheckedKeys()来获取目前被选中的节点的key所组成的数组，通过this.$refs.tree.getCheckedNodes()来获取目前被选中的节点所组成的数组。根据获取的勾选节点数量与treeData的数量进行比较，可以判断是全选、反选还是半选。通过设置v-model来控制全选或反选的状态。

示例代码如下：

<template>
  <el-checkbox v-model="checkecd" :indeterminate="indeterminate" @change="checkedAll">全部</el-checkbox>
  <el-tree :props="props" :data="treeData" ref="tree" accordion show-checkbox node-key="id" :expand-on-click-node="false" @check-change="handleCheckChange"></el-tree>
</template>

<script>
export default {
  data() {
    return {
      checkecd: false, // 是否全选
      indeterminate: false, // 是否半选
      treeData: [], // 树的数据
      props: {
        // 树节点的属性配置
      }
    };
  },
  methods: {
    handleCheckChange(item, isChecked) {
      // 获取勾选的数据
      let checkNode = this.$refs.tree.getCheckedKeys(); // 目前被选中的节点的 key 所组成的数组
      let checkNodeName = this.$refs.tree.getCheckedNodes(); // 返回目前被选中的节点所组成的数组

      // 如果勾选数量等于拉平后的treeData的数量，则是全选，反之为反选
      if (checkNode.length === this.treeData.length) {
        this.checkecd = true;
        this.indeterminate = false;
      } else if (checkNode.length === 0) {
        this.checkecd = false;
        this.indeterminate = false;
      } else {
        this.indeterminate = true;
      }
    },
    checkedAll(isChecked) {
      // 全选/反选
      if (isChecked) {
        this.$refs.tree.setCheckedNodes(this.treeData);
      } else {
        this.$refs.tree.setCheckedNodes([]);
      }
    }
  }
};
</script>