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 @ 2024-10-17 11:46  Felix_Openmind  阅读(18)  评论(0编辑  收藏  举报