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}],