el-tree使用心得及其一些坑

el-tree是elementui提供的一个树组件

里面的坑其实还是很多的

比如：1 设置节点高亮，必须加一个延时

　　　2.添加节点，必须使用$set

　　    3.数据的格式化

　　　4.父级id的设置

　　     ...........

<template>
  <div class="departmentManage" style="min-width: 824px;width:calc(100% - 10px - 10px); height: calc(100% - 10px - 10px);">
    <div style="width: 306px;float: left;height: 100%;">
      <div class="list-con shadow" style="height: 100%;">
        <div class="head alarm-data-head">
          <div class="list-tit m-l-10">
            部门列表
          </div>
          <div class="list-btn">
            <el-button type="primary" size="mini" @click="addRootDept">添加</el-button>
          </div>
        </div>
        <div class="maker treeDiv white" style="height: calc(100% - 44px);">
          <div class="search36">
            <el-input type="text" maxLength="16" v-model="searchName" class="search_inp no_border" size="mini" style="width:95%;" suffix-icon="el-icon-search" 
　　　　　　　　placeholder="请输入部门名称" @blur="initTree">
            </el-input>
          </div>
          <el-scrollbar class="treeDiv maker" wrap-class="hidden_x" style="height: calc(100% - 37px);">
            <el-tree ref="treeDept" class="filter-tree treeItem fireFoxMaxWidth" style="min-width: 100%;width: max-content;" node-key="depart_id" :data="treeData" 
　　　　　　　　:props="treeProps" @node-click="treeNodeClick" :expand-on-click-node="false" highlight-current :default-expanded-keys="[selectedNodeId]">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="tree-node-tit" style="width: 180px;">
                  {{ data.depart_name }}
                </span>
                <span style="float: right;" v-show="data.depart_id == selectedNodeId">
                  <template>
                    <el-button type="text" size="mini" class="tbBtn" @click.stop="addNode(data)" v-if="selectedNodeId!='newId'" style="margin-left:2px;">添加</el-button>
                    <el-button type="text" size="mini" class="tbBtn" style="margin-left:2px;" @click.stop="delNode(node, data)">删除</el-button>
                  </template>
                </span>
              </span>
            </el-tree>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div style="float: left; margin-left: 10px;min-width: 502px;width:calc(100% - 306px - 10px);height: 100%;">
      <div class="tabHead">
        <div class="list-tit" v-if="selectedNodeId!='newId'">
          <div v-for="(list,index) in navLists" class="nav" style="line-height: 44px !important;" :class="{ tabSelected:tabInd == index, tab:tabInd != index}">
            {{list.text}}
          </div>
        </div>
        <div class="list-btn fr m-r-10" v-if="tabInd==0">
          <el-button @click="saveItem('itemForm')" size="mini" type="primary">
            保存
          </el-button>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="table-con shadow" style="overflow-y:auto;width: 100%;">
        <div style="width: 100%;" class="white" v-if="tabInd == 0">
          <el-scrollbar wrap-class="hidden_x" style="min-width: 500px;width:100%;" :style="{height:tableH+37+44+'px'}">
            <el-form style="padding:20px;" :model="itemForm" :rules="itemFormRules" ref="itemForm" class="demo-ruleForm" :label-width="formLabelWidth">
              <el-form-item label="部门名称" prop="depart_name">
                <el-input v-model.trim="itemForm.depart_name" size="small" clearable placeholder="必填项" maxLength="64"></el-input>
              </el-form-item>
            </el-form>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import * as api_bcs from "@comm/api/index_bcs.js";

export default {
  data() {
    return {
      searchName: "",
      treeProps: {
        children: "children",
        depart_id: "depart_id",
        label: "depart_name",
      },
      tableH: 100,
      treeData: [], //部门数据
      selectedNode: {}, //选中node
      selectedNodeId: 0, //选中nodeId
      navLists: [
        //tab名称
        { text: "基本信息" },
      ],
      tabInd: 0,
      isNewTreeItem: true, //是否新建模型
      operate: "add",
      formLabelWidth: "90px", //编辑页面lable宽度

      //dept
      itemForm: {
        p_depart_id: 0,
        depart_name: "",
        departType: "",
        personInCharge: [],
        remark: "",
        status: 1,
      },
      itemFormRules: {
        depart_name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
      },
    };
  },
  created() {
    this.initTree();
  },
  methods: {
    //初始化 树的数据
    initTree(sign) {
      this.isNewTreeItem = true;
      this.treeData = [];
      let parm = {
        depart_name: this.searchName,
      };
      parm = qs.stringify(parm);
      api_bcs
        .loadDepartmentData(parm)
        .then((res) => {
          if (res && res.data) {
            if (res.data.length > 0) {
              this.treeData = res.data;
              this.operate = "edit";
              if (sign) {
                this.selectedNodeId = sign;
                this.findSelectNodeById(res.data);
              } else {
                this.selectedNode = this.treeData[0];
                this.selectedNodeId = this.selectedNode.depart_id;
              }
              this.setCurrentKey(this.selectedNodeId);
              this.initDept();
            } else {
              this.operate = "add";
              this.isNewTreeItem = false;
              this.selectedNode = { depart_id: "newId", depart_name: "新建部门" };
              this.treeData.push(this.selectedNode);
              this.selectedNodeId = this.selectedNode.depart_id;
              this.setCurrentKey(this.selectedNodeId);
              this.itemForm = {
                p_depart_id: 0,
                depart_name: "",
                departType: "",
                personInCharge: [],
                remark: "",
                status: 1,
              };
            }
          }
        })
        .catch((err) => {});
    },
    //根据selectedNodeId递归找到选中的节点
    findSelectNodeById(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].depart_id == this.selectedNodeId) {
          this.selectedNode = data[i];
          break;
        }
        if (data[i].children && data[i].children.length > 0) {
          this.findSelectNodeById(data[i].children);
        }
      }
    },
    //单击节点
    treeNodeClick(node, data) {
      console.log(node, "部门列表点击", data);
      if (this.$refs["itemForm"]) this.$refs["itemForm"].resetFields();
      let nodeContent = JSON.parse(JSON.stringify(node));
      this.selectedNode = nodeContent;
      this.selectedNodeId = node.depart_id;
      if (node.depart_id != "newId") {
        this.operate = "edit";
        this.initDept();
      } else {
        this.operate = "add";
        this.itemForm.p_depart_id = data.parent.data.depart_id;
        this.itemForm.depart_name = "";
        this.itemForm.remark = "";
      }
    },
    //设置tree选中 需要加一个延时，不然不生效 因为新添加了dom，只有dom更新后才能获取到节点
    setCurrentKey(key) {
      setTimeout(() => {
        const store = this.$refs.treeDept.store;
        store.setCurrentNodeKey(key);
        store.currentNodeKey = key;
      });
    },
    // 添加RootDept 根节点
    addRootDept() {
      this.selectedNode = null;
      this.selectedNodeId = "";
      this.setCurrentKey("");
      this.itemForm = {
        p_depart_id: 0,
        depart_name: "",
        departType: "",
        personInCharge: [],
        remark: "",
        status: 1,
      };
      this.operate = "add";
      if (this.isNewTreeItem) {
        const newChild = { depart_id: "newId", depart_name: "新建部门", children: [] };
        this.treeData.unshift(newChild);
        this.isNewTreeItem = false;
        this.selectedNode = newChild;
        this.selectedNodeId = this.selectedNode.depart_id;
        this.setCurrentKey("newId");
      } else {
        this.$message({ message: "您新建的部门还没有完成，快去完成吧", type: "warning" });
        this.setCurrentKey("newId");
      }
    },
    // 添加Node
    addNode(data) {
      if (this.isNewTreeItem) {
        this.itemForm = {
          p_depart_id: data.depart_id,
          depart_name: "",
          departType: "",
          personInCharge: [],
          remark: "",
          status: 1,
        };
        this.operate = "add";
        const newChild = { depart_id: "newId", depart_name: "新建部门", children: [] };
        if (!data.children) {
          this.$set(data, "children", []);
        }
        data.children.unshift(newChild);
        this.selectedNode = newChild;
        this.isNewTreeItem = false;
        this.selectedNodeId = this.selectedNode.depart_id;
        this.setCurrentKey("newId");
      } else {
        this.$message({
          message: "您新建的部门还没有完成，快去完成吧",
          type: "warning",
        });
      }
    },
    // 删除Node
    delNode(node, data) {
      if (data.depart_id == "newId") {
        this.initTree();
      } else {
        this.$confirm("是否确认删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          type: "warning",
          center: true,
        })
          .then(() => {
            if (node.childNodes.length > 0) {
              this.$message({
                showClose: true,
                type: "error",
                message: "此部门下存在子部门,请勿删除！",
              });
            } else {
              let parm = {
                depart_id: this.selectedNodeId,
              };
              parm = qs.stringify(parm);
              api_bcs.delDepartmentItem(parm).then((res) => {
                if (res && res.code == 200) {
                  this.$message({ showClose: true, type: "success", message: "删除成功" });
                  this.initTree();
                }
              });
            }
          })
          .catch(() => {
            this.$message({ showClose: true, type: "info", message: "已取消删除" });
          });
      }
    },
    // 初始化部门相关信息
    initDept() {
      let parm = {
        depart_id: this.selectedNodeId,
      };
      parm = qs.stringify(parm);
      api_bcs
        .getDepartmentItem(parm)
        .then((res) => {
          if (res && res.data) {
            this.itemForm = res.data;
          }
        })
        .catch((err) => {});
    },

    //保存dept
    saveItem(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.operate == "add") {
            api_bcs.addDepartmentItem(qs.stringify(this.itemForm)).then((res) => {
              if (res && res.data) {
                this.isNewTreeItem = true;
                this.$message({ showClose: true, type: "success", message: "添加成功" });
                this.initTree(res.data);
                this.itemForm.depart_id = res.data;
                this.selectedNode = this.itemForm;
                this.selectedNodeId = this.selectedNode.depart_id;
              }
            });
          } else {
            api_bcs.updateDepartmentItem(qs.stringify(this.itemForm)).then((res) => {
              if (res && res.code == 200) {
                this.$message({ showClose: true, type: "success", message: "修改成功" });
                this.selectedNode = this.itemForm;
                this.selectedNodeId = this.selectedNode.depart_id;
                this.initTree(this.selectedNodeId);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less">
</style>