史上最全的el-tree回显

<!--
 * @Author: 吴志伟
 * @Date: 2023-06-06 15:22:24
 * @LastEditors: 吴志伟
 * @LastEditTime: 2023-06-12 10:50:00
 * @Description: file content
 * @FilePath: \pc-end-yangaip\src\views\system\powerManage\roleManage\components\treeDialog.vue
-->

<template>
  <el-dialog :title="title" width="700px" :visible="show" @close="onClose" :close-on-click-modal="false">
    <div class="containner" style="height:300px">
      <el-tree ref="assignTree" v-loading="loading" :data="treeData" :show-checkbox="true" default-expand-all node-key="id" :props="defaultProps"></el-tree>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="onClose()">取 消</el-button>
      <el-button type="primary" @click="onConfirm('form')">确 定</el-button>
    </span>
  </el-dialog>
</template>
  
  <script>
import leafUtils from "@/utils/leafUtils";
import { getResourcesApi, treeInsertApi } from "@/api/system/sys";
export default {
  props: ["title", "id"],
  data() {
    return {
      checkIds: [],
      defaultCheckedKeys: [],
      loading: true,
      show: true,
      flag: null,
      form: {},
      treeData: [],
      defaultProps: {
        children: "subResource",
        label: "resName",
      },
    };
  },
  created() {
    this.getTree();
  },
  methods: {
    getTree() {
      let that = this;
      getResourcesApi({ roleId: this.id }).then((res) => {
        if (res?.data.length) {
          let menuList = res.data;
          this.loading = false;
          let selectIds = this.getChecked(menuList); //递归获取到勾选的所有id
          console.log("递归获取的勾选值", selectIds);
          // 判断是否是末级
          let { setLeaf } = leafUtils();
          let newMenuList = setLeaf(menuList);
          this.treeData = newMenuList;
          console.log("自己构造出的树木", this.treeData);
          this.$nextTick(() => {
            let nodes = this.$refs.assignTree.children; //获取树的所有数组数据
            this.setChild(nodes, selectIds, this);
            console.log("nodes--", nodes);
          });
        }
      });
    },
    setChild(childNodes, selectIds, that) {
      if (childNodes && childNodes.length > 0) {
        for (let j = 0; j < childNodes.length; j++) {
          // 根据 data 或者 key 拿到 Tree 组件中的 node
          var node = that.$refs.assignTree.getNode(childNodes[j]);
          console.log("第一级", node);
          if (selectIds && selectIds.length > 0) {
            for (let h = 0; h < selectIds.length; h++) {
              if (selectIds[h] == childNodes[j].id) {
                if (childNodes[j].open) {
                  console.log("第n级", node);
                  // 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性
                  that.$refs.assignTree.setChecked(node, true);
                  // break;
                }
              }
            }
          }
          if (childNodes[j].subResource) {
            that.setChild(childNodes[j].subResource, selectIds, that);
          }
        }
      }
    },
    //关闭事件
    onClose() {
      this.$emit("onClose");
    },
    //确认事件
    async onConfirm() {
      //半选的也要传给后端
      let listId = this.$refs.assignTree
        .getCheckedKeys()
        .concat(this.$refs.assignTree.getHalfCheckedKeys());
      let parm = {
        roleId: this.id,
        resIds: listId.join(","),
      };
      let res = await treeInsertApi(parm);
      console.log("保存", res);
      if (res.data == 1) {
        this.$message.success("保存成功");
        this.$emit("refresh");
      } else {
        this.$message.error("保存失败");
      }
    },
    getChecked(arr = []) {
      arr.forEach((item) => {
        if (item.isCheck == "1") {
          this.checkIds.push(item.id);
        }
        if (item.subResource?.length) {
          this.getChecked(item.subResource);
        }
      });
      return this.checkIds;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.el-dialog__wrapper {
  ::v-deep .el-dialog {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;

    .el-dialog__header {
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
      background-color: #1890ff;

      .el-dialog__title {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
      }

      .el-dialog__close {
        color: #fff;
      }
    }

    .el-dialog__body {
      padding: 10px;
    }

    .el-dialog__footer {
      // border-top: 1px solid #e8eaec !important;
      padding: 10px;
      padding-top: 30px;
    }
  }
}
</style>