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;论文中其他…

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

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

毕业设计选题:基于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…

论文阅读 - 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;

基于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;提供更加灵活、高效的云服务体验。 华为深刻洞察了中小企业和开发者在云服务应用中遇…

深度学习后门攻击分析与实现(一)

在计算机安全中&#xff0c;后门攻击是一种恶意软件攻击方式,攻击者通过在系统、应用程序或设备中植入未经授权的访问点,从而绕过正常的身份验证机制,获得对系统的隐蔽访问权限。这种"后门"允许攻击者在不被检测的情况下进入系统,执行各种恶意活动。 后门可以分为几种…

VOC2007数据集

目标检测入门code 文件目录 下载数据集——在官网下载VOC2007数据集 下载训练数据集 TRAIN data 下载测试数据集 TEST data 解压数据集 解压——训练数据集&#xff0c;在服务器上&#xff0c;目录为VOCdevkit 部分文件目录 全部文件总目录 解压——测试数据集 &#xff08;…

快速搭建Kubernetes集群

快速搭建Kubernetes集群 1 MacOS 1.1 下载 从 docker 下载 docker-desktop (opens new window)&#xff0c;并完成安装 1.2 启用 k8s 集群 启动 docker-desktop&#xff0c;打开preference 面板 切换到 Kubernetes 标签页&#xff0c;并勾选启动 Enable Kubernetes&#xff0c;…

Django 数据库配置以及字段设置详解

配置PostGre 要在 Django 中配置连接 PostgreSQL 数据库&#xff0c;并创建一个包含“使用人”和“车牌号”等字段的 Car 表 1. 配置 PostgreSQL 数据库连接 首先&#xff0c;在 Django 项目的 settings.py 中配置 PostgreSQL 连接。 修改 settings.py 文件&#xff1a; …

大模型深入行业,正从“星星之火”走向“燎原之势”

2024年&#xff0c;当越来越多的企业从赶大模型的潮流与炫大模型的参数规模开始转移到行业落地时&#xff0c;华为携生态伙伴用大模型深耕行业的成果俨然遍地开花。 在9月19日华为全联接大会2024大会上同期举办的华为云AI用户峰会上&#xff0c;华为云为28个创新项目颁发了“A…

【计算机组成原理】主存储器深度解析

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

VulnHub-Bilu_b0x靶机笔记

Bilu_b0x 靶机 概述 Vulnhub 的一个靶机&#xff0c;包含了 sql 注入&#xff0c;文件包含&#xff0c;代码审计&#xff0c;内核提权。整体也是比较简单的内容&#xff0c;和大家一起学习 Billu_b0x.zip 靶机地址&#xff1a; https://pan.baidu.com/s/1VWazR7tpm2xJZIGUS…

滑动窗口(6)_找到字符串中所有字母异位词

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 滑动窗口(6)_找到字符串中所有字母异位词 收录于专栏【经典算法练习】 本专栏旨在分享学习算法的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f4…

基于JAVA+SpringBoot+Vue的线上辅导班系统的开发与设计

基于JAVASpringBootVue的线上辅导班系统的开发与设计 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#…

Java 微服务框架 HP-SOA v1.1.4

HP-SOA 功能完备&#xff0c;简单易用&#xff0c;高度可扩展的Java微服务框架。 项目主页 : https://www.oschina.net/p/hp-soa下载地址 : https://github.com/ldcsaa/hp-soa开发文档 : https://gitee.com/ldcsaa/hp-soa/blob/master/README.mdQQ Group: 44636872, 66390394…

【C++算法】分治——快排

颜色分类 题目链接 颜色分类https://leetcode.cn/problems/sort-colors/description/ 算法原理 代码步骤 class Solution { public:void sortColors(vector<int>& nums) {int n nums.size();int i 0, left -1, right n;while(i < right){if(nums[i] 0) s…