Vue怎么使用elementui的el-tree和表格结合起来

实现效果

要做一个选择左边班级与右边数据关联起来的页面，效果如下，第一张是初始化效果，只有当选中班级并且查询之后右边才有相关数据

查找数据思路

本网站的后台是使用小程序云开发，数据都是通过云函数获取

1. 首先我们要思考一下怎么根据左边的去获取右边的数据，el-tree有个方法是可以获取所有选中的节点的，所以当我们选中五年级一班，会有三个数据，分别是学校、年级、班级的，此时最方便的方法就是只保存班级的然后根据班级去查找（班级里面有这个班所有学生的id），拿到这个班级之后就根据每一个学生id去数据库中查找相关学生。下一次查找时将当前学生清空后再次重新找一遍【还可以自己使用更方便的方法】

  <el-tree
          :data="treeData"
          show-checkbox
          node-key="id"
          ref="leftTree"
          default-expand-all
          row-key="deptId"
          :expand-on-click-node="true"
          :highlight-current="true"
          @check-change="CheckChange"
          class="filter-tree"
        >
        </el-tree>

    CheckChange() {
      //选中节点,再根据节点去判断当前哪一个是班级的，保存起来
      let res = this.$refs.leftTree.getCheckedNodes();
      this.handleCheckChange(res)
    },

  handleCheckChange(res) {
      let arr = [];
      let classUpload = [];
      res.forEach((item) => {
        console.log("遍历-------", item);
        if (item.type === "class") {
          //只将班级的放进去
          arr.push(...item.studentId);//将所有学生id展开保存到arr中
        }
      });
      this.permissionIds = arr;//在data中用一个变量接收
    },

  searchStu() {
      this.stuInfoData = [];//先将当前学生数据清空
      for (let i = 0; i < this.permissionIds.length; i++) {
        this.sendMessage(this.permissionIds[i]);//发送请求
      }
    },