vue-cli4.x + elementUI树形控件的使用（根据点击内容显示不同数据 + 带多选框的树形控件）

点击第一层、第二层、第三层都要显示其对应的数据（包括来回点击父子层节点，多次点击）

看了很多文章都说获取父级和子级的当前节点啥的，有点麻烦，em…，直接上代码

<el-tree
            :data="companyList"
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[0]"
            :accordion="true"
            ref="tree"
            :highlight-current="true"
            @node-click="handleNodeClick"
            current-node-key="id"//当前选中的节点，一定要加上
            node-expand="expandChange"
            :expand-on-click-node="true"
          >
            <span
              class="custom-tree-node"
              style="display: flex; align-items: center"
              slot-scope="{ node, data }"
            >
              <span style="font-size: 13px">{{ data.name }}</span>
              <span>
                <el-button
                  style="font-weight: bold; margin-left: 6px"
                  type="text"
                  size="mini"
                  @click="() => append(node, data)"
                  >...</el-button
                >
              </span>
            </span>
          </el-tree>

渲染出来的样子大致是这样：
点击对应层级节点显示响应的数据内容

js代码：

handleNodeClick(defaultKeys, node, info) {
      let name = defaultKeys.name;
      console.log(defaultKeys)
      console.log(node)
      console.log(info)
      //判断当前点击的是哪一层节点；1、最外层父节点；2、第二次层子节点；3、末层节点内容；4、.....以此类推
      // 并根据点击的内容显示不同的数据
      // 部分变量赋值为空是为了处理来回点击节点数据传值错误而写的
      if(node.level == 1){
        this.companyName = name
        this.gradeName = ''
        this.employeeName = ''
      } else if (node.level == 2){
        this.gradeName = name
        this.employeeName = ''
      } else if (node.level == 3) {
        this.employeeName = name
      }
      console.log(this.companyName)
      console.log(this.gradeName)
      console.log(this.employeeName)
      // 请求接口，获取数据
      this.getEmployeeList(this.currentPage, this.pageSize,'',this.gradeName,this.employeeName,this.companyName);
    },

handleNodeClick：是点击节点触发的方法，接收3个参数（点击该节点对应的对象，节点对应的node，组件本身），分别打印一下看看

在node当中有一个level字段就是我们需要用到的，代码中有注释，自己看，info打印的太多了，就不展示了，来看一下network的数据传值，通过传不同的值给后台来获取数据就ok了

带复选框的树形控件

html部分代码，@check-change是节点选中状态发生变化时的回调

	<el-tree
            :data="companyList"
            node-key="id"
            :props="defaultProps"
            :default-expanded-keys="[0]"
            :accordion="true"
            ref="tree"
            @check-change="handleCheckChange"
            :highlight-current="true"
            show-checkbox
            @node-click="handleNodeClick"
            current-node-key="id"
            node-expand="expandChange"
            :expand-on-click-node="true"
          >
            <span
              class="custom-tree-node"
              style="display: flex; align-items: center"
              slot-scope="{ node, data }"
            >
              <span style="font-size: 13px">{{ data.name }}</span>
            </span>
          </el-tree>

点击复选框的js代码
3个参数分别是：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点

    handleCheckChange(data, checked, indeterminate){
        this.isChecked = checked
        console.log(data)
       	//这里是node-key="xxxxx"绑定的数据，我绑定的是每个员工id
        console.log(this.$refs.tree.getCheckedKeys())
        //过滤最外层id（下方图片2位数字的）
        let employeeIdArr = this.$refs.tree.getCheckedKeys().filter(item => {
          return item.length !== 2
        })
        console.log(employeeIdArr.join(','))
        this.employeeId = employeeIdArr.join(',')
      },

上面的是通过key获取到的数据；下面的是过滤后的数据。这样就能取到点击的对应的数据了，
然后把他们传给后台