VUE自定义新增、复制、删除dom元素

功能需求,能灵活新增或删除一个dom元素,在此dom元素中还存在能灵活新增、删除的dom元素。实现后功能图如下:

点击新增策略,能新增整个策略dom

实现思路:定义一个数量和一个数组,然后使用循环遍历展示内容,新增或删除时只需要改变定义的数量,然后删除对应数组元素即可。

示例代码实现:

<div v-for="num in addPlan.strategyNum" :key="num" style="width: 88%; margin: 0 auto;"><accordion style="display: inline-block; width: 90%;"><template slot="header"><span style="background: #fff;">策略名称 {{ addPlan.strategyTempData[num - 1].pro_node }} {{ addPlan.strategyTempData[num - 1].plan_time.toLocaleString() }}</span></template><template slot="content"><bk-form><bk-form-item 名称 :required="true"><bk-selectv-model="addPlan.strategyTempData[num - 1].pro_node"searchable@change="selectProjectNodeHandel(num - 1, addPlan.strategyTempData[num - 1].pro_node)"><bk-option v-for="option in addPlan.projectNodeData":key="option.pro_node":id="option.pro_node":name="option.pro_node"></bk-option></bk-select></bk-form-item><bk-form-item 选择 :required="true"><bk-radio-group v-model="addPlan.strategyTempData[num - 1].pro_pass_point"><bk-radio :value="true">是</bk-radio><bk-radio :value="false">否</bk-radio></bk-radio-group></bk-form-item><bk-form-item 时间 :required="true"><bk-date-picker placement="right" v-model="addPlan.strategyTempData[num - 1].plan_time" :placeholder="$t('order.selectTime')" :type="'datetime'"></bk-date-picker></bk-form-item><bk-form-item><div style="border: 1px solid #E0E0E3;"><el-row v-for="entryNum in addPlan.strategyTempData[num - 1].entryRedLineNum" :key="entryNum" :gutter="5" style="width: 100%; padding: 5px 5px;"><el-col :span="8"><bk-selectv-model="addPlan.strategyTempData[num - 1].redlines_info.entry[entryNum - 1].key"searchable@change="selectEntryRedLineHandel(num - 1, entryNum - 1, addPlan.strategyTempData[num - 1].redlines_info.entry[entryNum - 1].key)"><bk-option v-for="option in addPlan.projectRedLineData":key="option.key":id="option.key":name="option.name"></bk-option></bk-select></el-col><el-col :span="6"><bk-selectv-model="addPlan.strategyTempData[num - 1].redlines_info.entry[entryNum - 1].selectCondition"searchable><bk-option v-for="option in addPlan.strategyTempData[num - 1].redlines_info.entry[entryNum - 1].conditions":key="option.key":id="option.key":name="option.name"></bk-option></bk-select></el-col><el-col :span="6"><bk-input :clearable="true" v-model="addPlan.strategyTempData[num - 1].redlines_info.entry[entryNum - 1].default_value"></bk-input></el-col><el-col :span="4"><bk-button text="true" v-if="addPlan.strategyTempData[num - 1].entryRedLineNum > 1" @click="delEntryRedLineDom(num, entryNum)" :title="$t('order.button.delete')" style="margin-left: 10px;"><i class="devops-icon icon-delete"></i></bk-button><bk-button text="true" v-if="entryNum === addPlan.strategyTempData[num - 1].entryRedLineNum" @click="addEntryRedLineDom(num)" :title="$t('order.button.addFile')" style="margin-left: 10px;"><i class="devops-icon icon-plus"></i></bk-button></el-col></el-row></div></bk-form-item></bk-form></template></accordion><bk-button style="display: inline-block;" :text="true" theme="primary" @click="copyStrategyDom(num)">{{ $t('order.button.copy') }}</bk-button><bk-button style="display: inline-block;" :text="true" theme="warning" @click="delStrategyDom(num)">{{ $t('order.button.delete') }}</bk-button></div>//定义的数据
strategyNum: 1,
strategyTempData: [{pro_node: '',pro_pass_point: false,plan_time: '',redlines_info: {entry: [{key: '',name: '',conditions: [],default_value: '',selectCondition: ''}],exit: [{key: '',name: '',conditions: [],default_value: '',selectCondition: ''}]},entryRedLineNum: 1,exitRedLineNum: 1}
],//新增策略 
addStrategyDom () {const newData = {pro_node: '',pro_pass_point: false,plan_time: '',redlines_info: {entry: [{key: '',name: '',conditions: [],default_value: '',selectCondition: ''}],exit: [{key: '',name: '',conditions: [],default_value: '',selectCondition: ''}]},entryRedLineNum: 1,exitRedLineNum: 1}this.addPlan.strategyTempData.push(newData)this.addPlan.strategyNum++
},
//删除策略
delStrategyDom (num) {this.addPlan.strategyTempData.splice(num - 1, 1)this.addPlan.strategyNum--
},
//复制策略
copyStrategyDom (num) {const newData = this.addPlan.strategyTempData[num - 1]newData.plan_time = newData.plan_time.toLocaleString()this.addPlan.strategyTempData.push(JSON.parse(JSON.stringify(newData)))this.addPlan.strategyNum++
},//策略dom内部的 dom 新增
delInteriorDom (firstNum, secondNum) {this.addPlan.strategyTempData[firstNum - 1].redlines_info.entry.splice(secondNum - 1, 1)this.addPlan.strategyTempData[firstNum - 1].entryRedLineNum--
},addInteriorDom (firstNum) {const newData = {key: '',name: '',conditions: [],default_value: '',selectCondition: ''}this.addPlan.strategyTempData[firstNum - 1].redlines_info.entry.push(newData)this.addPlan.strategyTempData[firstNum - 1].entryRedLineNum++
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40170.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

将iStoreOS部署到VMware ESXi变成路由器

正文共&#xff1a;888 字 19 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面把iStoreOS部署到了VMware workstation上&#xff08;将iStoreOS部署到VMware Workstation&#xff09;。如果想把iStoreOS直接部署到ESXi上&#xff0c;你会发现转换镜像不能直接生成OVF或者OV…

css+js实现导航栏色块跟随滑动+点击后增加样式

这篇文章&#xff0c;我给大家分享一个导航菜单的效果。用cssJS实现&#xff0c;效果如图&#xff1a; 本例实现效果&#xff1a;当鼠标移动到其他菜单项时&#xff0c;会有个背景色块跟随鼠标横向平滑移动。当鼠标点击后&#xff0c;被点击的菜单名称文字字体会加粗。 现在&…

《数字图像处理与机器视觉》案例四 基于分水岭算法的粘连物体的分割与计数

一、引言 分水岭算法&#xff08;Watershed Algorithm&#xff09;&#xff0c;是一种基于拓扑理论的数学形态学的分割方法&#xff0c;其基本思想是把图像看作是测地学上的拓扑地貌&#xff0c;图像中每一点像素的灰度值表示该点的海拔高度&#xff0c;每一个局部极小值及其影…

SpringBoot 集成Swagger在线接口文档 接口注解

介绍 Swagger接口文档是一种自动生成、描述、调用和可视化的RESTful风格Web服务接口文档的工具。它通过一系列的规范和自动化工具&#xff0c;极大地简化了后端开发人员与前端开发人员之间的协作。 依赖 <!--swagger--> <dependency><groupId>io.springfo…

「媒体邀约」天津媒体资源?媒体邀约宣传报道

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 媒体宣传加速季&#xff0c;100万补贴享不停&#xff0c;一手媒体资源&#xff0c;全国100城线下落地执行。详情请联系胡老师。 天津拥有丰富的媒体资源&#xff0c;利用这些资源进行有效…

ICMP协议详解及尝试用ping和tracert捕抓ICMP报文

一、ICMP协议 1.1、定义 ICMP&#xff08;Internet Control Message Protocol&#xff0c;互联网控制消息协议&#xff09;是一个支持IP层数据完整性的协议&#xff0c;主要用于在IP主机、路由器之间传递控制消息。这些控制消息用于报告IP数据报在传输过程中的错误&#xff0c…

C++ 语法

一、头文件与源文件 头文件用于声明函数,类似于java中service层的接口; 源文件用于实现头文件函数,相当于java中serviceImpl层的实现类; 定义接口 实现接口 使用接口 二、指针概述 定义与使用 定义一个指针p用于存a变量的内存地址,即指针就是地址; 解引用可以获取或修改…

40岁以上的中年人很难找到工作

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 你们有没有发现&#xff0c;90%的40岁以上的中年人&#xff0c;为了多挣钱&#xff0c;几乎除了吃饭和睡觉之外&#xff0c;都在拼命加班劳作&#xff0c;只要一停下来&#xff0c;心里就有一种内疚感&#xff0c;…

【Elasticsearch】Elasticsearch动态映射与静态映射详解

文章目录 &#x1f4d1;前言一、Elasticsearch 映射概述1.1 什么是映射&#xff1f;1.2 映射的分类 二、动态映射2.1 动态映射的定义2.2 动态映射的优点2.3 动态映射的缺点2.4 动态映射的应用场景2.5 动态映射的配置示例 三、静态映射3.1 静态映射的定义3.2 静态映射的优点3.3 …

机器学习简介--NLP(二)

机器学习简介 机器学习简介机器学习例子机器学习分类有监督学习有监督学习的应用 无监督学习 机器学习常见概念数据集k折交叉验证过拟合欠拟合评价指标 机器学习简介 机器学习例子 问题&#xff1a; 2&#xff0c;4&#xff0c;6&#xff0c;8&#xff0c;&#xff1f;&#…

【CV炼丹师勇闯力扣训练营 Day22:§7 回溯1】

CV炼丹师勇闯力扣训练营 代码随想录算法训练营第22天 回溯法其实就是暴力查找,回溯的本质是穷举&#xff0c;穷举所有可能&#xff0c;然后选出我们想要的答案&#xff0c;一般可以解决如下几种问题&#xff1a; 组合问题&#xff1a;N个数里面按一定规则找出k个数的集合切割…

Ubuntu18.04新安装--无网络连接、重启黑屏解决教程

一、安装Ubuntu Ubuntu安装需要U盘作为启动盘&#xff0c;在目前教新的电脑中选中GPT作为分区&#xff0c;制作启动盘&#xff0c;其中在安装双系统Ubuntu时&#xff0c;以自定义格式作为存储空间。详细安装过程以以及如何分区请参考下列链接&#xff1a;内含详细安装过程&…

VS Code 常用快捷键大全

Visual Studio Code 是目前最好用的代码编辑器之一。它提供了许多开箱即用的功能以及丰富的第三方扩展&#xff0c;本文将分享常用的 VS Code 快捷键&#xff0c;助你提高开发效率&#xff01; 代码导航 跳转指定行&#xff1a;快速跳转到文件中的指定行&#xff0c;只需按下快…

Unity 数据持久化【PlayerPrefs】

1、数据持久化 文章目录 1、数据持久化PlayerPrefs基本方法1、PlayerPrefs概念2、存储相关3、读取相关4、删除数据思考 信息的存储和读取 PlayerPrefs存储位置1、PlayerPrefs存储的数据在哪个位置2、PlayerPrefs 数据唯一性思考 排行榜功能 2、Playerprefs实践1、必备知识点-反…

解决 Layout Inspector无法查看Component Tree 布局层级信息 | Android Studio Koala

问题描述 Tool -> Layout Inspector 显示下图&#xff0c;无法生成.li文件查看Component Tree&#xff0c;变成实时的Preview并功能点击操作&#xff0c;跟模拟器一样。 原因&#xff1a;默认勾选了"Enable embedded Layout Inspector"&#xff0c;启用了嵌入式…

SpringCloud进阶篇

文章目录 网关快速入门创建模块引入依赖修改启动类配置路由路由过滤(一般不用) 自定义GlobalFilter登录校验登录校验过滤器 微服务获取用户信息保存用户信息到请求头拦截器获取用户信息 OpenFeign传递用户信息配置共享添加共享配置拉取共享配置 配置热更新添加配置到Nacos配置热…

数据结构初阶 堆的问题详解(三)

题目一 4.一棵完全二叉树的节点数位为531个&#xff0c;那么这棵树的高度为&#xff08; &#xff09; A 11 B 10 C 8 D 12 我们有最大的节点如下 假设最大高度为10 那么它的最多节点应该是有1023 假设最大高度为9 那么它的最多节点应该是 511 所以说这一题选B 题目二 …

指挥中心操作台的形状及空间布局

在现代化的指挥中心&#xff0c;操作台的形状设计至关重要&#xff0c;它不仅影响着操作人员的工作效率和舒适度&#xff0c;还关系到整个指挥系统的运行效果。常见的指挥中心操作台形状多种多样&#xff0c;以满足不同的功能需求和空间布局。 直线型操作台 直线型操作台是最为…

C语言 | Leetcode C语言题解之第212题单词搜索II

题目&#xff1a; 题解&#xff1a; class Solution { public:struct Node{int id;Node* son[26];Node(){id -1;for(int i 0; i < 26; i) son[i] NULL;}}* root;vector<vector<char>> g;unordered_set<int> ids;vector<string> res;int dx[4] …

Windows编程原理-消息驱动的机制

Windows为每一个输入事件产生一个输入消息&#xff0c;如&#xff1a; 移动鼠标按键…… 从程序角度看待Windows消息处理 Windows使用一个窗口前必须&#xff1a; 填充一个结构&#xff1a;WNDCLASS注册窗口创建窗口使用窗口撤销窗口 从这个机制看&#xff0c;windows操作系统…