vue 组件化开发（三）elementui el-tree 实现可编辑树

如图：

html ：

数据定义：

data() {
    return {
      runParam: {},
      treeData: null,
      isAdd: false,
      dialogVisible: false,
      renderNode: null,
      renderData: null,
      savePostUrl: "",
      delPostUrl: "",
      getAll: "",
      sortOrder: "",
      checkName: "",
      defaultProps: {
        children: "CHILDREN",
        label: "NAME"
      }
    };
  },

methods 部分：

confirm: function() {
      this.delTreeNode(this.renderNode, this.renderData);
    },
    addNode() {
      if (this.dialogName == "gwjb" && !this.selectSquence) return;
      this.runParam.oldData = JSON.parse(JSON.stringify(this.treeData));
      this.runParam.parentNode = null;
      this.runParam.level = 0;
      this.treeData.push({
        NAME: "",
        CHILDREN: [],
        STATUS: 1,
        ID: null
      });
    },
    append(node, data) {
      if (node.level >= this.maxLevel) return;
      this.runParam.oldData = JSON.parse(JSON.stringify(this.treeData));
      if (!data.CHILDREN) this.$set(data, "CHILDREN", []);
      this.runParam.parentNode = JSON.parse(JSON.stringify(data));
      this.isAdd = true;
      const newChild = { ID: null, NAME: "", CHILDREN: [], STATUS: 1 };
      data.CHILDREN.push(newChild);
    },
    remove(node, data) {
      this.dialogVisible = true;
      this.renderNode = node;
      this.renderData = data;
    },
    blurEdit(data, node) {
      if (data.NAME == "") this.treeData = JSON.parse(JSON.stringify(this.runParam.oldData));
      else this.checkRepeatName(data, node);
    },
    dbEdit(node, data) {
      this.runParam.oldData = JSON.parse(JSON.stringify(this.treeData));
      this.runParam.parentNode = data.PID ? data.PID : null;
      this.$set(data, "STATUS", 1);
      this.isAdd = false;
      this.$forceUpdate();
    },
    collapse(moveNode, inNode, type) {
      if (moveNode.level == 1 && inNode.level == 1) return type == "prev";
      if (moveNode.level == 2 && inNode.level == 2 && moveNode.parent.ID == inNode.parent.ID) return type == "prev";
    },
    nodeDropEnd() {
      let _this = this;
      let par = {
        serviceName: "pos",
        servicePath: this.sortOrder,
        LIST: _this.treeData
      };
      this.$nextTick(function() {
        _this
          .$request(par)
          .then(() => {
            _this.$store.dispatch(_this.dishpatch, JSON.parse(JSON.stringify(_this.treeData)));
          })
          .catch(msg => _this.$message.error(msg));
      });
    },