首页 > 其他分享 >AntDesign树形组件tree和输入input组件融合使用

AntDesign树形组件tree和输入input组件融合使用

时间:2024-10-17 11:48:29浏览次数:11  
标签:code item tree label AntDesign 组件 array children operateType

						<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);
				}
			}
		},

标签:code,item,tree,label,AntDesign,组件,array,children,operateType
From: https://www.cnblogs.com/openmind-ink/p/18471761

相关文章

  • Map集合中的具体子类TreeMap
    一、TreeMap元素是一个键值对,可以去重并进行排序1.先编写一个Dog2类publicclassDog2{privateStringname;privateintage;publicDog2(){}publicDog2(Stringname,intage){this.name=name;......
  • 1.5K+ Star!assistant-ui:一套构建AI聊天界面的组件库
    assistant-ui简介assistant-ui[1]是一套用于构建AI聊天界面的React组件库。它集成了多种模型提供商,如OpenAI、Anthropic、AWS、Google等,并支持自定义API集成。它旨在简化AI聊天界面的开发过程,使开发者能够快速构建出功能丰富的聊天应用。项目特点主要特点模型提供商支......