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

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

时间:2024-10-17 11:48:29浏览次数:8  
标签: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

相关文章

  • 鸿蒙 NEXT 如何使用 @Styles 装饰器来优化我的组件代码?
    大家好,我是V哥。在鸿蒙NEXT开发中,@Styles装饰器是一种非常有用的方法,用于定义可重用的样式。这使得开发者可以将多条样式设置提炼成一个方法,以便在多个组件中复用,从而提高代码的可维护性和可读性。以下是@Styles装饰器的详细用法和应用场景案例。@Styles装饰器的使用说明......
  • vue开发中,在js文件里使用pinia和组件同步
    遇到问题在js文件中封装涉及到使用pinia的方法时,发现和组件内容并不同步,二者是互相独立的。为了方便使用,需要在新建对象的时候,将pinia作为参数传进去只需要传pinia参数就可以store/index.jsimport{defineStore}from"pinia";import{createPinia}from'pinia'export......
  • Map集合中的具体子类TreeMap
    一、TreeMap元素是一个键值对,可以去重并进行排序1.先编写一个Dog2类publicclassDog2{privateStringname;privateintage;publicDog2(){}publicDog2(Stringname,intage){this.name=name;......
  • [题解]NOIP2018模拟赛 plutotree
    题目描述给定一棵有\(n\)个节点的树,根节点为\(1\),节点\(i\)有权值\(w[i]\)。这棵树非常奇怪,它的每个叶子结点都有一条连向根节点的权值为\(0\)的边。给定\(q\)次询问,每次给定\(u,v\),请计算出一条\(u\)到\(v\)的路径(每条边最多经过\(1\)次),最小化该路径上的点权之和,并在其基础上最......
  • Set集合的直接子类TreeSet
    一、TreeSet:底层数据结构是红黑树(自平衡二叉树),具备了可预测的排序1.自然排序通过实现comparable接口,重写里面的compareTo方法来进行排序1.编写一个Dog类,实现了Comparable接口,并重写里面的方法publicclassDogimplementsComparable<Dog>{privateStringname;pri......
  • Vue3也能用上Vue2写的组件
    文章目录     文章目录概要整体架构流程参考博客实现效果图技术细节小结概要需求:开发一个问题反馈组件,要求企微连线负责人、跳转页面反馈问题...组件可以安装在Vue2、Vue3、React等项目里整体架构流程创建webpack-simple项目,编写组件,部署并发布npm包......
  • 如何在鸿蒙 NEXT 中使用 @Builder 装饰器优化 UI 组件的复用?
    在开发鸿蒙NEXT应用时,咱们需要经常创建自定义组件,由于自定义组件内部UI结构固定,仅与使用方进行数据传递,因此,ArkUI还提供了一种更轻量的UI元素复用机制@Builder。大家好,我是V哥,在鸿蒙NEXT开发中,@Builder装饰器是一种轻量级的UI元素复用机制,它允许开发者将重复使用......
  • Vue 3中集成Element Plus组件库
    文章目录一、ElementPlus简介二、安装ElementPlus2.1安装ElementPlus2.2引入ElementPlus三、使用ElementPlus组件3.1创建组件3.2组件引入四、总结随着前端开发的快速发展,组件库已经成为开发实践中不可或缺的部分。Vue3作为一个现代的J......
  • 界面组件DevExpress WPF v24.1亮点 - 支持全新的字体图标图像
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。DevExpressWPF控件日前正式发布了今年一个重大版......
  • 1.5K+ Star!assistant-ui:一套构建AI聊天界面的组件库
    assistant-ui简介assistant-ui[1]是一套用于构建AI聊天界面的React组件库。它集成了多种模型提供商,如OpenAI、Anthropic、AWS、Google等,并支持自定义API集成。它旨在简化AI聊天界面的开发过程,使开发者能够快速构建出功能丰富的聊天应用。项目特点主要特点模型提供商支......