elementui e-tree树形结构

<template>
  <div>
<el-tree
      class="treeSty"
      :data="treedata"
      show-checkbox   // 节点是否可被选择
      :default-expand-all="treeAll"   // 是否默认展开所有节点
      :default-expanded-keys="expandedKeys"   // 这个是展示某个指定的节点（回显的时候必须的展开不然获取到的节点是未选择的节点，所以采用了这个）
      node-key="userId"
      ref="tree"
      highlight-current // 是否高亮当前选中节点
      :props="defaultProps"
      :default-checked-keys="checkKeys" // 默认勾选的节点的 key 的数组 （回显的时候用，checkeys就是回显的id值）
      check-strictly   // 父子不互相关联 （写上这个属性之后，选中之后获取的数据不包含父节点）
      @check="check"  // 返回选择的节点（这里我用node-click监听不到，所以用的这个）
      @node-expand="treexpand"  // 节点被展开时触发的事件（我这里是获取第二层数据的时候，根据第一层数据的值调取的接口，因为我是多个接口。。。）  ---- 这个我已经取消了，这里备注一下是干什么用的（我用的懒加载获取的数据，没用这个了）
      @check-change="handleCheckChange"  //获取选中的节点
      check-on-click-node  // 是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。（个人感觉用这个体验效果比较好，要不然只有点击哪个框才可以选上）
      :render-content="rendContent" // 回显高亮
      :load="loadNode"  // 懒加载获取数据
      lazy  // 使用懒加载必须写这个
    >
    </el-tree>

    <div class="treeBtn">
      <el-button type="primary" @click="submit">确定</el-button>
      <el-button @click="closeTree">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: ["treehosId", "treeunionId", "close", "onPersonnel", "echopersonnel"],
  data() {
    return {
      treedata: [], //树形结构
      defaultProps: {
        children: "children",
        label: "name",
        userId: "userId",
        departmentId: "departmentId",
      },
      treeAll: false, //默认展开所有子节点
      checkData: [], //选中的数据
      checkKeys: [], //回显的值
      removeDatas: [], //取消的节点
      expandedKeys: [], //展开的节点
    };
  },
  methods: {
  // 回显数据高亮
    rendContent(h, { node, data }) {
      // console.log(data);
      // 判断有需要高亮的数据的时候再写
      if (this.newChec) {
        let hightdata = this.newChec;

        if (hightdata.indexOf(data.userId) != -1) {
          return <span class="hightli">{data.name}</span>;
        } else {
          return <span>{data.name}</span>;
        }
      } else {
       // 不需要高亮就返回默认状态
        return <span>{data.name}</span>;
      }
    },
    // 获取选中的节点
    handleCheckChange(data, checked) {
      // getCheckedNodes 方法 被选中的节点
      this.checkData = this.$refs.tree.getCheckedNodes();
      // console.log(this.checkData);
    },
    // 点击确定按钮，这里是我处理数据然后返回后端想要的数据
    submit() {
      let newArr = this.checkData.map(function (g) {
        return {
          doctorId: g.userId,
          departmentId: g.departmentId,
        };
      });
      // console.log(newArr);
      let lasttest = this.defdata(newArr);
      // console.log(lasttest);
      if (lasttest && lasttest != "[]") {
        lasttest.map((item) => {
          item.doctorId = item.doctorId.substr(0, item.doctorId.length - 1);
          item.doctorId = item.doctorId.split(",");
        });
        // console.log(lasttest);
        let newLasttest = JSON.stringify(lasttest);
        this.$emit("onPersonnel", newLasttest);
      } else {
        this.$emit("onPersonnel", "");
      }
    },
    // 处理数据的方法
    defdata(oldArr) {
      // console.log(oldArr);
      let tempArr = [],
        newArr = [];
      for (var i = 0; i < oldArr.length; i++) {
        if (tempArr.indexOf(oldArr[i].departmentId) === -1) {
          newArr.push({
            departmentId: oldArr[i].departmentId,
            doctorId: oldArr[i].doctorId + ",",
          });
          tempArr.push(oldArr[i].departmentId);
        } else {
          for (let j = 0; j < newArr.length; j++) {
            if (newArr[j].departmentId == oldArr[i].departmentId) {
              newArr[j].doctorId += oldArr[i].doctorId + ",";
              break;
            }
          }
        }
      }
      // console.log(newArr);
      return newArr;
    },
    // 属性结构点击事件
    check(data) {
      // console.log(data);
    },
    // 回显数据，以及高亮数据
    echo(val) {
    // 先把回显的节点清空
    this.expandedKeys=[]
      let newEcho;
      if (this.echopersonnel) {
        if (typeof this.echopersonnel == "object") {
          newEcho = this.echopersonnel;
        } else {
          newEcho = JSON.parse(this.echopersonnel);
        }
        // 回显的时候让已选择的科室高亮
        if (newEcho.length > 0) {
          // console.log(newEcho);
          let newChec = [];
          let newDepEcho = [];
          for (let i = 0; i < newEcho.length; i++) {
            // console.log(newEcho[i].doctorId);
            for (let j = 0; j < newEcho[i].doctorId.length; j++) {
              // console.log(newEcho[i].doctorId[j])
              if (newEcho[i].doctorId[j]) {
                // 展开某个节点数据 
                this.expandedKeys.push(newEcho[i].departmentId);
                newChec.push(Number(newEcho[i].doctorId[j]));
              }
            }

            newDepEcho.push(newEcho[i].departmentId);
            // console.log(newDepEcho);
            // 高亮科室和医生
            // this.newChec = newChec.concat(newDepEcho);
            // 只高亮科室
            this.newChec = newDepEcho;
          }

          // console.log(newChec);
          let that = this;
          setTimeout(function () {
            that.checkKeys = newChec;
          }, 0);
        }
      }
    },
    // 获取第二级
    async treeTwo(data) {
      // console.log(data);
      this.treeAll = false;
      let arr = data;
      arr.children = [];
      let cdata = {
        departmentId: arr.departmentId,
        hospitalId: this.treehosId,
      };
      // console.log(data)
      let { data: res } = await this.$axios.getDoctorByDepartment(cdata);
      // console.log(res.data);
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].check = 2;
        arr.children.push(res.data[i]);
      }
    },
    // 懒加载
    loadNode(node, resolve) {
      let that = this;
      // 第一级
      if (node.level === 0) {
        that.treeList(); //获取顶级节点数据
      }
      // 第二级
      if (node.level === 1) {
        this.treeTwo(node.data); //异步获取子节点数据
        return resolve([]); // 防止在该节点没有子节点时一直转圈
      }
      // 第三级没有
      if (node.level === 2) {
        return resolve([]); // 防止在该节点没有子节点时一直转圈
      }
      // 回显数据
      this.echo();
    },
    // 获取第一级树形结构数据
    async treeList() {
      let data = {
        unionId: this.treeunionId,
        hosId: this.treehosId,
      };
      // console.log(data);
      let { data: res } = await this.$axios.listByHosIdAndUnionId(data);
      //   console.log(res.list);
      let arr = [];
      for (let i = 0; i < res.list.length; i++) {
        res.list[i].list = [{}];
        res.list[i].check = 1;
        res.list[i].disabled = true;
        arr.push(res.list[i]);
      }
      // console.log(arr);
      let that = this;
      let newArr = arr.map(function (g) {
        // console.log(g)
        return {
          userId: g.id,
          name: g.departmentName,
          children: g.list,
          check: g.check,
          departmentId: g.id,
          disabled: g.disabled,
        };
      });
      // console.log(newArr);
      this.treedata = newArr;
      this.echo("科室");
    },
  },
};
</script>

<style lang="less" scoped>
// 选择的时候，设置背景颜色，（这样知道自己选的是哪个，要不然数据多了真的不知道是哪个了。）
/deep/
  .el-tree--highlight-current
  .is-current.el-tree-node
  > .el-tree-node__content {
  background-color: rgba(135, 206, 235, 0.2) !important;
  // color: #347ede;
}

// 高亮颜色
/deep/ .hightli {
  color: #409eff !important;
}
</style>