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