el-form中三级动态添加数据

el-form中三级动态添加数据

    • data数据
    • view
    • 按钮触发事件

在这里插入图片描述

data数据

submitForm: {id: undefined, //修改IDapp_id: undefined, //IP类型name: '', //规则名称sort: undefined, //排序detail: [{keycode: 0,title_one: undefined, //一级标题desc_detail: [{keycode: 0,title_two: undefined, //二级标题desc: undefined, //描述}]}]},

view

<el-form :model="submitForm" ref="submitForm" label-width="120px" class="demo-ruleForm"><el-form-item label="规则名称" prop="name":rules="[{ required: true, message: '请输入规则名称', trigger: 'blur' }]"><el-input v-model="submitForm.name" placeholder="请输入规则名称" /></el-form-item><el-form-item label="排序" prop="sort":rules="[{ required: true, message: '请输入排序', trigger: 'blur' }]"><el-input-number v-model="submitForm.sort" :min="0" :max="9999" label="请输入排序"style="width: 100%;" /></el-form-item><!-- 一级 --><el-form-item><el-button type="primary" icon="el-icon-plus" @click="plusClassAHandle">新增一级标题</el-button></el-form-item><template v-for="(item,index) in submitForm.detail"><el-card class="box-card" style="margin-bottom: 12px;":key="`classA-${submitForm.detail[index].keycode}`"><el-form-item label="一级标题" :prop="'detail.' + index + '.title_one'":rules="[{ required: true, message: '请输入一级标题', trigger: 'blur' }]"><el-input v-model="item.title_one" placeholder="请输入一级标题" /></el-form-item><!-- 二级 --><el-form-item><el-button type="primary" icon="el-icon-plus"@click="plusSecondaryHandle(item)">新增二级标题</el-button></el-form-item><template v-for="(subitem,subindex) in item.desc_detail"><el-card class="box-card" style="margin-bottom: 12px;":key="`secondary-${submitForm.detail[index].desc_detail[subindex].keycode}`"><el-form-item label="二级标题":prop="'detail.'+index+'.desc_detail.' + subindex + '.title_two'":rules="[{ required: true, message: '请输入二级标题', trigger: 'blur' }]"><el-input v-model="subitem.title_two" placeholder="请输入二级标题" /></el-form-item><el-form-item label="详情":prop="'detail.'+index+'.desc_detail.' + subindex + '.desc'":rules="[{ required: true, message: '请输入详情', trigger: 'blur' }]"><el-input v-model="subitem.desc" style="display: none;" /><Editor :height="300" v-model="subitem.desc"></Editor></el-form-item><template v-if="subindex!==0"><el-form-item><el-button type="danger" icon="el-icon-delete" circle@click="removeSecondaryHandle(item.keycode,subitem)"></el-button></el-form-item></template></el-card></template><template v-if="index!==0"><el-form-item><el-button type="danger" icon="el-icon-delete" circle@click="removeClassAHandle(item)"></el-button></el-form-item></template></el-card></template></el-form>

按钮触发事件

/*** 点击-新增一级目录*/plusClassAHandle() {let tempItem = {keycode: 'A-' + Utils.getCurrentTimeStamp(),title_one: undefined, //一级标题desc_detail: [{keycode: 'B-' + Utils.getCurrentTimeStamp(),title_two: undefined, //二级标题desc: undefined, //描述}]}const data = this.submitForm['detail'];data.push(tempItem);this.submitForm['detail'] = data;},removeClassAHandle(row) {let data = this.submitForm['detail'];data.some((item, index) => {if (item.keycode == row.keycode) {this.submitForm['detail'].splice(index, 1)}})},/*** 点击-新增二级目录**/plusSecondaryHandle(row) {let tempItem = {keycode: 'B-' + Utils.getCurrentTimeStamp(),title_two: undefined, //二级标题desc: undefined, //描述}const data = this.submitForm['detail'];data.filter((item, index) => {if (item.keycode === row.keycode) {item.desc_detail.push(tempItem)}})this.submitForm['detail'] = data;},removeSecondaryHandle(keycode, row) {let data = this.submitForm['detail'];data.some((item, index) => {if (item.keycode == keycode) {item.desc_detail.some((subitem, subindex) => {if (subitem.keycode === row.keycode) {this.submitForm['detail'][index].desc_detail.splice(subindex, 1)}})}})}

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

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

相关文章

阅读CVPR论文——mPLUG-Owl2:革命性的多模态大语言模型与模态协作

读后感悟&#xff1a; 1&#xff09;实验部分非常丰富&#xff0c;并且论文中的图制作的非常精美&#xff0c;论文开篇的图制作的别出心裁&#xff0c;将几种不同的方法表现出的性能差异不是以普通的表格形式展现&#xff0c;而是制作成了一副环状折线图&#xff0c;论文中其他…

快速理解TCP协议(三)——TCP协议的三次握手与四次挥手

在网络通信的浩瀚海洋中&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;如同一座坚固的桥梁&#xff0c;连接着网络世界的每一个角落。TCP协议通过其独特的三次握手&#xff08;Three-Way Handshake&#xff09;和四次挥手&…

Docker vs. containerd 深度剖析容器运行时

随着容器技术的日益普及&#xff0c;Docker 和 containerd 这两个名词频繁出现在我们的视野中。它们都是容器化技术的重要组成部分&#xff0c;但各自扮演着不同的角色。本文将深入探讨 Docker 和 containerd 的区别与联系&#xff0c;帮助大家更好地理解容器技术的底层原理。 …

【protobuf】ProtoBuf的学习与使用⸺C++

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#xff1a;之前我们学习了Linux与windows的protobuf安装&#xff0c;知道protobuf是做序列化操作的应用&#xff0c;今天我们来学习一下protobuf。 目录 ⼀、初识ProtoBuf 步骤1&#xff1a;创建.proto文件 步…

scss知识汇总

参考资料 https://www.bilibili.com/video/BV1KJ411Y7Zz?p11 //入门 https://www.bilibili.com/video/BV1bK411H7YU?fromsearch&seid1507236772512004325 //精简 https://www.bilibili.com/video/BV1KE411b7RQ?p25 //大全h…

软技能与AI技术的融合

一、引言 ----  随着人工智能&#xff08;AI&#xff09;和生成式人工智能&#xff08;AIGC&#xff09;如ChatGPT、Midjourney、Claude等大语言模型的迅速崛起&#xff0c;AI辅助编程工具已经变得越来越普遍。这不仅意味着程序员的工作方式正在发生深刻的变革&#xff0c;同…

Centos7 部署rocketmq

1.服务器先创建java环境 Centos7 安装JDK21、配置环境变量_centos7安装jdk21-CSDN博客 2.下载mq 下载的是5.1.4&#xff1a;wget https://dist.apache.org/repos/dist/release/rocketmq/5.1.4/rocketmq-all-5.1.4-bin-release.zip 下载后用unzip解压就行了 3.启动name serve…

【通用权限系统】

通用权限系统 创建一个空的maven父工程pom.xml文件配置作用 搭建公具类父模块common&#xff08;聚合其子模块&#xff09;新建模块common-util&#xff08;核心工具类&#xff09;pom.xml配置 新建模块service-util 搭建实体类模块model搭建service服务模块service-system依赖…

毕业设计选题:基于ssm+vue+uniapp的英语学习激励系统小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

使用jaxb来生成多层嵌套xml

问题 需要生成多层嵌套xml&#xff0c;类似如下内容&#xff1a; <A><B><C><!-- C类的字段 --></C><C><!-- 另一个C类的字段 --></C></B> </A>解决 C.java import jakarta.xml.bind.annotation.*; import lom…

Spring Boot入门指南——从零开始构建你的后端服务

随着微服务架构的流行&#xff0c;Spring Boot 已成为后端开发领域中最流行的框架之一。它简化了配置过程&#xff0c;并帮助开发者快速启动一个应用程序。在本文中&#xff0c;我们将深入探讨 Spring Boot 的基础知识&#xff0c;并结合最新资料&#xff0c;帮助你从零开始搭建…

IT技术在数字化转型中的关键作用

IT技术在数字化转型中的关键作用 在当今数字化浪潮中&#xff0c;IT技术无疑扮演着核心角色。无论是企业的数字化转型&#xff0c;还是政府公共服务的智能化提升&#xff0c;信息技术都在推动着整个社会向更高效、更智能的方向发展。本文将探讨IT技术在数字化转型中的关键作用…

论文阅读 - MDFEND: Multi-domain Fake News Detection

https://arxiv.org/pdf/2201.00987 目录 ABSTRACT INTRODUCTION 2 RELATED WORK 3 WEIBO21: A NEW DATASET FOR MFND 3.1 Data Collection 3.2 Domain Annotation 4 MDFEND: MULTI-DOMAIN FAKE NEWS DETECTION MODEL 4.1 Representation Extraction 4.2 Domain Gate 4.…

使用llama.cpp 在推理MiniCPM-1.2B模型

llama.cpp 是一个开源项目&#xff0c;它允许用户在C中实现与LLaMA&#xff08;Large Language Model Meta AI&#xff09;模型的交互。LLaMA模型是由Meta Platforms开发的一种大型语言模型&#xff0c;虽然llama.cpp本身并不包含LLaMA模型的训练代码或模型权重&#xff0c;但它…

postman控制变量和常用方法

1、添加环境&#xff1a; 2、环境添加变量&#xff1a; 3、配置不同的环境&#xff1a;local、dev、sit、uat、pro 4、 接口调用 5、清除cookie方法&#xff1a; 6、下载文件方法&#xff1a;

PostgreSQL的查看主从同步状态

PostgreSQL的查看主从同步状态 PostgreSQL 提供了一些系统视图和函数&#xff0c;查看和监控主从同步的状态。 1 在主节点上查看同步状态 pg_stat_replication 视图 在主节点上&#xff0c;可以通过查询 pg_stat_replication 视图来查看复制的详细状态信息&#xff0c;包括…

CVC输入语言

声明 位向量表达式&#xff08;或项&#xff09;由位向量常数、位向量变量以及下列函数构成。在STP中&#xff0c;所有变量必须在使用前声明。声明一个长度为32的位向量变量的例子是&#xff1a;x : BITVECTOR(32);。声明数组的例子如下&#xff1a; x_arr : ARRAY BITVECTOR(…

基于JAVA+SpringBoot+Vue的社区智慧养老监护管理平台

基于JAVASpringBootVue的社区智慧养老监护管理平台 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#x1…

使用SBP打AssetBundle时脚本引用丢失

1&#xff09;使用SBP打AssetBundle时脚本引用丢失 2&#xff09;在UE 5.3中连接Power节点为何10的3次幂等于1009 3&#xff09;如何在Widget中倾斜一张纹理贴图 4&#xff09;如何在打开关卡蓝图时更改游戏模式 这是第401篇UWA技术知识分享的推送&#xff0c;精选了UWA社区的热…

828华为云征文 | 将Vue项目部署到Flexus云服务器X实例并实现公网访问

一、Flexus云服务器X实例简介 1.1 概述 华为云Flexus X实例是华为云推出的一款创新云服务器产品&#xff0c;它主要面向中小企业和开发者&#xff0c;旨在解决传统云服务中的痛点&#xff0c;提供更加灵活、高效的云服务体验。 华为深刻洞察了中小企业和开发者在云服务应用中遇…