vue根据输入n动态生成n个表单

我的构想:在输入框中输入一个数字n,然后点击一个按钮,弹出一个弹窗,里面有n个表单。

这是按钮的vue代码:数值保存在form.number里面,每次数字改变会触发numberChange

//...略
<el-form-item prop="paragraph_number">
  <span slot="label">
    <span style="color:#333;font-size: 16px;"><strong>待生成段落数量</strong></span>
  </span>
  <el-input-number v-model="form.number" @change="numberChange" :min="1" :max="20"
    label="请选择待生成段落数量"></el-input-number>
  <span style="color: #727882;">(最大值为20</span>
</el-form-item>
//...略

这是弹出的表单的vue代码:

<el-dialog title="段落描述" :visible.sync="dialogFormVisible">
  <div v-for="(item, index) in numberFormsList" :key="index">
    <el-form :ref="`paragraph${index}`" :model="paragraph[index]" label-width="150px">
      <el-form-item prop="subtitle">
        <span slot="label">
          <span style="color:#333;font-size: 16px;"><strong>段落{{ index + 1 }}关键词</strong></span>
        </span>
        <el-input v-model="paragraph[index].subtitle" clearable placeholder="请填写段落关键词"></el-input>
      </el-form-item>
      <el-form-item prop="maxLength">
        <span slot="label">
          <span style="color:#333;font-size: 16px;"><strong>段落{{index+1}}最大字数</strong></span>
        </span>
        <el-input v-model="paragraph[index].maxLength" clearable placeholder="请输入段落最大字数"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="resetForm('paragraph')">取 消</el-button>
    <el-button type="primary" @click="paragraphDefine">保 存</el-button>
  </div>
</el-dialog>

这是数据

data(){
	return {
		form: {
			//略。。。
	        number: '', //段落数量,也就是我们所说的n
      },
	  dialogFormVisible: false, // 是否显示对话框
      formLabelWidth: '150px',
      paragraph: [], // 对话框中的表单
      numberFormsList: [1], //该列表的长度代表n
	}
},
created: function () {
  let len = 20;
  for (let i = 0; i < len; i++){
    let item = {
      subtitle: '',
      maxLength: ''
    };
    this.paragraph.push(item);
  }
},

这是每次数字改变会触发的函数:

numberChange(value) {
  let len = this.numberFormsList.length
  while (value > len) {
    this.numberFormsList.push(1);
    len++;
  }
  while (value < len) {
    this.numberFormsList.pop(1);
    len--;
  }
}

效果图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

POCEXP编写—多线程

POC&EXP编写—多线程 1. 前言2. 多进程&多线程2.1. 多进程2.1.1. 案例 2.2. 多线程2.2.1. 案例&#xff1a; 2.3. POC的案例&#xff08;模板&#xff09; 3. UA头设置3.1. 随机UA头3.1.1. 案例3.1.2. 模板拼接 4. 代理Proxy4.1. 单代理案例4.2. 多代理案例4.2.1. 请求…

【2024最叼教程】Appium自动化环境搭建保姆级教程

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

鸿蒙内核源码分析(线程概念篇) | 是谁在不断的折腾CPU

本篇说清楚任务的问题 在鸿蒙内核线程(thread)就是任务(task)&#xff0c;也可以叫作业.线程是对外的说法&#xff0c;对内就叫任务.跟王二毛一样&#xff0c; 在公司叫你王董&#xff0c;回到家里还有领导&#xff0c;就叫二毛啊.这多亲切.在鸿蒙内核是大量的task&#xff0c…

【Linux系列】 离线安装vnc 可视化桌面

离线安装vnc 可视化桌面 缘下载安装vnc初始化链接 缘 项目需要下载 下载地址&#xff1a; http://mirror.centos.org/centos/7/updates/x86_64/Packages/tigervnc-license-1.8.0-31.el7_9.noarch.rpm http://mirror.centos.org/centos/7/os/x86_64/Packages/libXfont2-2.0.…

Word插件开发

VSTO是Visual Studio Tools for Office的简称&#xff0c;它是Microsoft Visual Studio的一个扩展&#xff0c;用于开发基于Microsoft Office平台的应用程序。VSTO提供了一套API和工具&#xff0c;使开发人员能够利用Visual Studio IDE来开发定制的Office解决方案。 在 Visual…

DiffusionGAN ——最快的小波扩散模型应用研究

介绍 扩散模型最近出现并迅速发展&#xff0c;吸引了许多研究人员的兴趣。这些模型能从随机的噪声输入生成高质量的图像。在图像生成任务中&#xff0c;它们的表现尤其优于最先进的生成模型&#xff08;GANs&#xff09;。扩散模型可以灵活地处理各种条件输入&#xff0c;从而…

knife4j swagger 使用笔记

1.接口访问的端口跟后台设置的不一致&#xff0c;接口请求无反应 处理办法 2.响应参数不显示问题 &#xff08;1&#xff09;返回的参数里面一定要有响应的参数对象&#xff0c;如下&#xff1a; &#xff08;2&#xff09;TableDataInfo 定义成泛型类 TableDataInfo package…

移动应用安全

移动应用安全 移动应用安全主要关注Android、iOS、Windows Phone等平台上移动应用软件安全状态。它涉及应用程序在其设计运行的平台上下文中的安全问题、它们使用的框架以及预期的用户集。所有主流的移动平台都提供大量可选的安全控制&#xff0c;旨在帮助软件开发人员构建安全…

浅析扩散模型与图像生成【应用篇】(十八)——ControlNet

18. Adding Conditional Control to Text-to-Image Diffusion Models 现有的文生图模型如Stable Diffusion通常需要人工输入非常准确的提示词&#xff0c;而且生成的结果还是完全随机不可控制的&#xff0c;只能通过生成多个结果&#xff0c;再从中选取最佳方案。而ControlNet的…

竞争分析:波特五力模型

波特五力模型是分析企业竞争环境的一个分析模型。 根据波特的观点&#xff0c;每家企业都受到“直接竞争对手、顾客、供应商、潜在新进公司和替代性产品”这五个“竞争作用力”的影响。 我们用波特五力模型试着分析下实体书店竞争是否激励。 直接竞争对手&#xff1a;如果直接…

料堆体积测量新方案:激光雷达

激光雷达测量料堆体积是一种高效且精确的方法。激光雷达的工作原理与雷达相似&#xff0c;通过发射激光束探测目标的位置、速度等特征量。在测量料堆体积时&#xff0c;激光雷达系统向料堆发射激光束&#xff0c;然后接收从料堆表面反射回来的信号。通过对这些反射信号的处理和…

Linux网络之DNS域名解析

一、DNS概述 1.1什么是DNS 域名解析协议&#xff0c;将域名转换成IP地址 1.2为什么要用DNS IP地址不便于记忆&#xff0c;DNS使用户可以通过易记的域名快速访问各种网络资源。 192.168.0.0—— ip地址过长而且都是数字&#xff0c;不方便记忆就出现了域名 www.baidu.com—…

记一次线上日志堆栈不打印问题排查(附:高并发系统日志打印方案可收藏)

目录 一.线上的日志堆栈不打印了二.一步一步仔细排查三.最后搞定四.聊一聊线上日志到底应该怎么打印4.1 日志打印的诉求4.2 常见的系统日志上报方案4.2.1 ELK 方案4.2.2 自定义log appender 完成应用日志采集. 4.3 日志常见框架傻傻分不清4.4 日志在高并发系统中需要注意的 tip…

神仙级Python入门教程,手把手教你从0到精通,学不会算我输!

亲爱的朋友们&#xff0c;你是否对编程充满好奇&#xff0c;却觉得它遥不可及&#xff1f; 你是否想学习一门强大的编程语言&#xff0c;却不知从何下手&#xff1f; 那么&#xff0c;这篇“神仙级”Python入门教程就是为你量身打造的&#xff01;不论你是编程小白还是有一定…

linux笔记4--shell命令1

文章目录 一. 目录1.说明2.盘符3.linux根目录(以Ubuntu为例)①说明②根目录下一些文件夹的解析/home/root/mnt/media/var/cdrom/etc/lib (/lib32--32位的&#xff0c;/lib64-64位的)/lostfound/boot/proc/bin/sbin/snap/srv/usr/opt/dev/run/tmp 二. ls命令--操作文件夹1.说明2…

探索阿里巴巴商品详情API接口:开启电商数据之旅

阿里巴巴商品详情API接口是阿里巴巴开放平台提供的一项服务&#xff0c;它允许开发者通过调用接口获取指定商品的详细信息&#xff0c;包括商品标题、价格、库存、描述、图片等。这些数据对于电商从业者来说具有极高的价值&#xff0c;可以帮助他们更好地了解市场动态&#xff…

层次分析法(AHP)计算原理解释

AHP层次分析法是一种解决多目标复杂问题的定性和定量相结合进行计算决策权重的研究方法。该方法将定量分析与定性分析结合起来&#xff0c;用决策者的经验判断各衡量目标之间能否实现的标准之间的相对重要程度&#xff0c;并合理地给出每个决策方案的每个标准的权数&#xff0c…

vue下载文件时显示进度条

1.单个下载&#xff08;开始是导出按钮 下载显示进度条&#xff09; html <el-button click.stop"exportReport(scope.row, scope.index)" v-if"!scope.row.schedule" icon"el-icon-download"size"small" type"text"styl…

Linux第十五章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

系统思考—企业辅导咨询

从2004年、2014年到2024年&#xff0c;国九条政策的发布与变迁不仅影响了行业趋势&#xff0c;更深刻地改变了企业的风险预估和策略辅导。彼得杜鲁克曾经说过&#xff1a;“必须系统地抛弃旧知识。”这不仅是企业领导者的挑战&#xff0c;也是我们每个人的难题。难点不在于我们…