element树形控件编辑节点组装节点

需求功能：

编辑树节点，组装节点

<el-scrollbar class="scrollbar-wrapper">
          <el-tree :data="nodeList" ref="tree" :props="defaultProps" :expand-on-click-node="false">
            <template slot-scope="{ node, data }">
              <div class="custom-tree-node">
                <template v-if="node.label">
                  <span>{{node.label}} <span v-if="node.level==4 && false" style="padding-left:30px">
                      <el-checkbox v-model="data.isCommon" true-label="Y" false-label="N">是否常用分类</el-checkbox>
                    </span>
                  </span>
                  <span style="margin-left:20px">
                    <el-button size="small" type="text" @click.stop="appendNode(node,data)"
                      :disabled='node.level==4'>新增</el-button>
                    <el-button size="small" type="text" @click.stop="editNode(node,data)">编辑</el-button>
                    <el-button size="small" type="text" @click.stop="removeNode(node,data)">删除</el-button>
                  </span>
                </template>
                <template v-else="!node.investFormCodeText">
                  <el-row :gutter="20" style="width:80%">
                    <el-col :span="3">
                      <div class="">编号：</div>
                    </el-col>
                    <el-col :span="6">
                      <el-input v-model="data.investFormCode" size="small" placeholder="请输入编号"></el-input>
                    </el-col>
                    <el-col :span="3">
                      <div class="">描述：</div>
                    </el-col>
                    <el-col :span="12">
                      <el-input v-model="data.investFormCodeDesc" size="small" placeholder="请输入描述"></el-input>
                    </el-col>
                  </el-row>
                  <span style="margin-left:20px">
                    <el-button size="small" @click="handleCancel(node,data)">取消</el-button>
                    <el-button size="small" type="primary" @click.stop="addChild(node,data)"
                      :disabled='node.level==4'>保存</el-button>
                  </span>
                </template>
              </div>
            </template>
          </el-tree>
        </el-scrollbar>

data () {
    return {
      nodeList: [],
      defaultProps: {
        children: 'childList',
        label: 'investFormCodeText'
      },
      deleteList: [],
    }
  }

appendNode (node, data) {
      //为 Tree 中的一个节点追加一个子节点
      this.$refs.tree.append({
        dictKey: "marketQuotationInvestForm",
        investFormCodeText: '',
        childList: []
      }, node)
    },
    editNode (node, data) {
      this.$set(data, "tempInvestFormCodeText", data.investFormCodeText);
      this.$set(data, "investFormCodeText", "");
    },
    removeNode (node, data) {
      const parent = node.parent;
      const childList = parent.data.childList || parent.data;
      const index = childList.findIndex(d => d === data);
      if (data.id) {
        this.$confirm('删除配置项将影响历史数据，请确认是否删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          childList.splice(index, 1);
          this.deleteList.push({
            id: data.id
          });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
      else {
        childList.splice(index, 1);
      }
    },

// 数据结构
"nodeList": [{
		"investFormCodeText": "TF01 -- 搜索广告",
		"investFormCode": "TF01",
		"childList": null,
		"id": 14,
		"investFormCodeDesc": "搜索广告",
		"parentId": 0
	},
	{
		"investFormCodeText": "TF02 -- 开屏",
		"investFormCode": "TF02",
		"childList": [{
				"investFormCodeText": "A001 -- 抖音-开屏",
				"investFormCode": "A001",
				"childList": [{
						"investFormCodeText": "B001 -- 优选互动",
						"investFormCode": "B001",
						"childList": null,
						"id": 17,
						"investFormCodeDesc": "优选互动",
						"parentId": 16
					},
					{
						"investFormCodeText": "B002 -- 优选点击",
						"investFormCode": "B002",
						"childList": null,
						"id": 18,
						"investFormCodeDesc": "优选点击",
						"parentId": 16
					},
					{
						"investFormCodeText": "B003 -- 超级优选",
						"investFormCode": "B003",
						"childList": null,
						"id": 19,
						"investFormCodeDesc": "超级优选",
						"parentId": 16
					}
				],
				"id": 16,
				"investFormCodeDesc": "抖音-开屏",
				"parentId": 15
			},
			{
				"investFormCodeText": "A002 -- 头条-开屏",
				"investFormCode": "A002",
				"childList": [{
						"investFormCodeText": "B001 -- 优选互动",
						"investFormCode": "B001",
						"childList": null,
						"id": 21,
						"investFormCodeDesc": "优选互动",
						"parentId": 20
					},
					{
						"investFormCodeText": "B002 -- 优选点击",
						"childList": null,
						"id": 22,
						"investFormCodeDesc": "优选点击",
						"parentId": 20
					}
				],
				"id": 20,
				"investFormCodeDesc": "头条-开屏",
				"parentId": 15
			}
		],