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);
}
}
},
posted @   Felix_Openmind  阅读(66)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
*{cursor: url(https://files-cdn.cnblogs.com/files/morango/fish-cursor.ico),auto;}
点击右上角即可分享
微信分享提示