AntDesign树形组件tree和输入input组件融合使用
<a-tree :tree-data="selectItem.options.options" :replace-fields="{ children: 'children', title: 'label', code: 'code' }" > <template #title="{ label, value, code }"> <div style="display: flex; position: relative"> <a-input @blur="updateLabelByCode(selectItem.options.options, code, label)" size="small" v-model="label" style="width: 80px"/> <a-input @blur="updateValueByCode(selectItem.options.options, code, value)" size="small" v-model="value" style="width: 80px"/> <div style="position: absolute; left: 180px;"> <a-button style="border: none" @click="handleTreeData(selectItem.options.options, code, 'sameLevelAdd')" type="primary" ghost shape="circle" icon="plus-square" size="small"/> <a-button style="border: none" @click="handleTreeData(selectItem.options.options, code, 'nextLevelAdd')" type="primary" ghost shape="circle" icon="minus" size="small"/> <a-button style="border: none" @click="handleTreeData(selectItem.options.options, code, 'selfDelete')" type="primary" ghost shape="circle" icon="delete" size="small"/> </div> </div> </template> </a-tree> updateLabelByCode(array, code, newLabel) { for (let i = 0; i < array.length; i++) { let item = array[i]; if (item.code === code) { item.label = newLabel; return; } if (item.children) { this.updateLabelByCode(item.children, code, newLabel); } } }, handleTreeData(array, code, operateType) { for (let i = 0; i < array.length; i++) { let item = array[i]; // 比对节点的 label 和 value if (item.code === code) { if (operateType === "sameLevelAdd") { // 同级别增加 array.splice(i + 1, 0, { value: ``, label: ``, code: nanoid() }); return; } else if (operateType === "nextLevelAdd") { // 下一个级别增加 if (!item.children) { item.children = []; } item.children.push({ value: ``, label: ``, code: nanoid() }); this.$forceUpdate() return; } else if (operateType === "selfDelete") { // 删除该节点 array.splice(i, 1); return; } } // 如果有子节点,递归处理 if (item.children) { this.handleTreeData(item.children, code, operateType); } } },
学而不思则罔,思而不学则殆!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具