vue + el-tree 实现插入节点自定义名称数据

效果：

代码：

<template>
    <div style="height: 200px; width: 350px">
      <el-tree
        ref="eltree"
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        @node-click="handleNodeClick"
        :current-node-key="currentLivingId"
        :render-content="isUpdateGroup ? updateRenderContent : renderContent"
      >
      </el-tree>
    </div>
</template>

data() {
    return {
      currentLivingId: "",
      treeData: [
        {
          createTime: null,
          flag: "1",
          id: "49d117e56c5d4df0be61451dbccb27d8",
          isGrade: null,
          level: "0",
          month: null,
          name: "父节点",
          parentId: "-1",
          partId: null,
          sort: 3,
          subList: [
            {
              createTime: null,
              flag: "1",
              id: "b19747602f9b47d7b0f4a90528d3674c",
              isGrade: null,
              level: "1",
              month: null,
              name: "子节点1",
              parentId: "49d117e56c5d4df0be61451dbccb27d8",
              partId: null,
              sort: 1,
              subList: [
                {
                  createTime: null,
                  flag: "1",
                  id: "b19747602f9b47d7b0f4a90528d3624c",
                  isGrade: null,
                  level: "2",
                  month: null,
                  name: "子节点1-1",
                  parentId: "b19747602f9b47d7b0f4a90528d3674c",
                  partId: null,
                  sort: 1,
                  subList: [],
                  year: null,
                },
              ],
              year: null,
            },
            {
              createTime: null,
              flag: "1",
              id: "9da8ccb4513f4cd383c8185b052937d3",
              isGrade: null,
              level: "1",
              month: null,
              name: "子节点2",
              parentId: "49d117e56c5d4df0be61451dbccb27d8",
              partId: null,
              sort: 2,
              subList: [],
              year: null,
            },
            {
              createTime: null,
              flag: "1",
              id: "a4c8bbf1be434ea6aca1eb51ef55c69a",
              isGrade: null,
              level: "1",
              month: null,
              name: "子节点3",
              parentId: "49d117e56c5d4df0be61451dbccb27d8",
              partId: null,
              sort: 3,
              subList: [],
              year: null,
            },
          ],
          year: null,
        },
      ], //树返回的数据
      defaultProps: { children: "subList", label: "name" }, //接受的格式
      isUpdateGroup: false, //是否新增
      isact: "", //当前hover的节点
      isBreak: false, //是否结束循环
      curNode: undefined, //当前选中节点
      indexRecord: [], //记录节点轨迹
      isactTitle: "", //记录修改节点名称
    };
  },
  methods: {
    //获取鼠标进入节点的数据
    mouseenteract(data) {
      this.isact = data;
    },
    mouseleaveact(da) {
      this.isact = "";
    },
    // 树节点点击
    handleNodeClick(data, e) {
      // 临时添加数据 temporaryData 是1 return 防止触发其他事件
      if (data.temporaryData == 1) {
        return;
      }
      this.node = data;
      this.curNode = data; //当前选中节点
    },
    //修改组名时获取title
    handleChangeTitle(e) {
      let value = e.target.value;
      this.isactTitle = value;
    },
    updateRenderContent(h, { node, data, store }) {
      return (
        <span style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;">
          <span>
            {this.isact == data ? (
              <input
                placeholder="请输入"
                onChange={this.handleChangeTitle.bind(this)}
                value={node.label}
                id="userInfo"
              />
            ) : (
              <span>{node.label}</span>
            )}
          </span>
          {this.isact == data ? (
            <span>
              <el-button
                class="m-r-10"
                type="text"
                icon="el-icon-check"
                on-click={() => this.updateGroup(node, data)}
              ></el-button>
              <el-button
                class="m-r-10"
                type="text"
                icon="el-icon-close"
                on-click={(e) => this.cancelUpdate(node, data, e)}
              ></el-button>
            </span>
          ) : (
            <span></span>
          )}
        </span>
      );
    },
    // 新增树子节点
    updateGroup(node, data) {
      if (this.isactTitle.trim() == "") {
        this.$message.warning("名称不能为空");
        return;
      }
      var params = {
        id: data.id,
        flag: "1",
        name: this.isactTitle,
        level: "2",
        parentId: data.parentId || "-1",
        sort: data.sort,
        partId: data.partId,
      };
      var newNode = {
        id: data.id,
        flag: "1",
        name: this.isactTitle,
        level: "2",
        parentId: data.parentId || "-1",
        sort: data.sort,
      };
      console.log(params);
      // 这块调用新增树子组件的接口
      addUnitPerformanceCustom(params).then((res) => {
        if (res) {
          if (res.data.code == 0) {
            this.node = newNode;
            this.curNode = newNode; //当前选中节点
            // 更新树组件接口
            this.$emit("getTreeListData", newNode);
            this.isUpdateGroup = false;
            this.$notify.success({ title: "成功", message: res.data.data });
          } else {
            this.$notify.error({
              title: "失败",
              message: "增加失败",
            });
          }
        } else {
          this.$notify.error({ title: "失败", message: "系统异常" });
        }
      });
    },
    //取消添加
    cancelUpdate(node, data, e) {
      this.isUpdateGroup = false;
      //如果是插入操作 需要移除数据
      if (this.isact.temporaryData) {
        // //存在则添加到子级
        const parent = node.parent;
        const children = parent.data.subList || parent.data;
        //若parent.data是对象，操作的是子级；如果是数组，操作的是最外层
        if (Array.isArray(parent.data)) {
          const parentIndex = parent.data.findIndex((d) => d.id === data.id);
          parent.data.splice(parentIndex, 1);
        } else {
          const childIndex = children.findIndex((d) => d.id === data.id);
          children.splice(childIndex, 1);
        }
        this.curNode = undefined;
      }
      //更新树节点数据
      this.$emit("getTreeListData");
    },
    // 删除子节点
    handleDelete(node, data, e) {
      e.stopPropagation();
      var params = {
        id: data.id,
      };
      // 删除子节点接口
      deleteUnitPerformanceCustom(params).then((res) => {
        if (res) {
          if (res.data.code == 0) {
            // 更新树组件
            this.$emit("getTreeListData");
            this.isUpdateGroup = false;
            this.curNode = undefined;
            this.$notify.success({ title: "成功", message: res.data.data });
          } else {
            this.$notify.error({
              title: "失败",
              message: "删除失败",
            });
          }
        } else {
          this.$notify.error({ title: "失败", message: "系统异常" });
        }
      });
    },
    //递归遍历获得选中node
    getTemplateTreeNode(target, list, level) {
      //空数组直接返回
      if (list.length == 0) return;
      let dataLen = list.length;
      for (let i = 0; i < dataLen; i++) {
        //如果不匹配
        if (target != list[i].id) {
          //存在subList 遍历subList里的节点
          if (list[i].subList) {
            this.indexRecord[level] = i;
            let recordDept = level + 1;
            this.getTemplateTreeNode(target, list[i].subList, recordDept);
          }
        } else {
          //匹配，则修改下标数组
          this.indexRecord[level] = i;
          this.isBreak = true;
          break;
        }
        //删除不匹配的轨迹 如果已经break了说明已经找到正确的节点，就不用再删了
        if (!this.isBreak) {
          this.indexRecord.pop();
        } else {
          break;
        }
      }
    },
    //插入节点
    insertNode(insertChild, tree, indexArr, len) {
      let index = indexArr.length - len;
      if (len == 0) {
        tree.push(insertChild);
      } else {
        this.insertNode(
          insertChild,
          tree[indexArr[index]].subList,
          indexArr,
          len - 1
        );
      }
    },
    //新增组
    handleAddGroup(node, data, e) {
      e.stopPropagation();
      this.curNode = data;
      //如果isUpdateGroup 已经是true了 说明重复点击了
      if (this.isUpdateGroup) {
        return;
      }

      let id = ([1e7] + 1e3 + 4e3 + 8e3 + 1e11).replace(/[018]/g, (c) =>
        (
          c ^
          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
        ).toString(32)
      );
      var sort = 0;
      if (data.subList.length == 0) {
        sort = 1;
      } else {
        sort = data.subList[data.subList.length - 1].sort + 1;
      }
      let newChild = {
        parentId: data.id, //如果有这个id 是插入第二层 否则是第一层 可有可无
        label: "", //必须有 this.templateContent.tempName
        subList: [],
        id: id,
        level: 2,
        sort: sort,
        temporaryData: "1", //用来区分临时数据
        flag: 1, //用来区分临时数据
        partId: node.parent.data.id,
      };
      this.indexRecord = [];
      if (this.curNode) {
        if (!this.curNode.subList) {
          this.$message.warning("模板不可添加");
          return;
        }
        newChild.parentId = this.curNode.id;
        //找到tree中的index轨迹
        this.getTemplateTreeNode(data.id, this.treeData, 0);
        //按照index轨迹插入节点
        this.insertNode(
          newChild,
          this.treeData,
          this.indexRecord,
          this.indexRecord.length
        );
        this.isBreak = false;
      } else if (this.curNode == undefined) {
        //没有选中的时候 添加到最外层
        newChild.level = 1;
        this.treeData.push(newChild);
      }
      //调用出updateRender的input
      this.isact = newChild;
      this.isUpdateGroup = true;
      this.$nextTick(() => {
        // 自动获取焦点
        document.getElementById("userInfo").focus();
      });
    },
    // 树每条数据
    renderContent(h, { node, data, store }) {
      return (
        <span
          style="flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 8px;"
          on-mouseenter={() => this.mouseenteract(data)}
          on-mouseleave={() => this.mouseleaveact(data)}
        >
          <span style="margin-bottom: 0;" class="pdata">
            {node.label}
          </span>
          {this.isact == data && this.isact.flag == 1 ? (
            <span>
              {this.isact.level == 1 && this.isact.flag == 1 ? (
                <el-button
                  class="m-r-10"
                  type="text"
                  icon="el-icon-plus"
                  on-click={(e) => this.handleAddGroup(node, data, e)}
                ></el-button>
              ) : (
                <span></span>
              )}
              {this.isact.level == 2 && this.isact.flag == 1 ? (
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  on-click={(e) => this.handleDelete(node, data, e)}
                ></el-button>
              ) : (
                <span></span>
              )}
            </span>
          ) : (
            <span></span>
          )}
        </span>
      );
    },
  },