【vue】element ui 实现动态表单点击按钮新增行/删除行

简介: 【vue】element ui 实现动态表单点击按钮新增行/删除行
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步💪~\
如果大家喜欢,可以点赞或留言💕 ~~,谢谢大家⭐️⭐️⭐️~

这里针对点击按钮增删一排输入框的问题做一个总结。效果图如下:

存在一排必填的内容,点击新增行后会新增一行,点击每行后面的删除按钮则会删除该行
考虑的实现方式是,先写死一个必须的表单,需要新增表单的放在一个div里,在div中使用v-for生成,达到同时增加的效果。

动态表单部分

<div class="left_Box">
     <div class="btnTool" style="text-align:right;">
         <el-button type="primary" size="mini"@click="addDomain">新增行</el-button>
         <el-button type="primary" size="mini"@click="clear_btn('dynamicValidateForm')">清空</el-button>
         <el-button type="primary" size="mini"@click="submitForm('dynamicValidateForm')">存为模板</el-button>
     </div>
     <div>
         <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" :inline="true" class="demo_dynamic">
                <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="dv_hang" >
                  <el-form-item
                    :key="domain.key"
                    :prop="'domains.' + index + '.lx'"
                    :rules="{
                      required: true, message: '不能为空', trigger: 'blur',
                    }"
                  >
                    <label>状态符</label>
                    <el-select v-model="domain.lx" size="small">
                      <el-option label="计划停运" value="PO"></el-option>
                      <el-option label="非计划停运" value="UO"></el-option>
                      <el-option label="第一类非计划停运" value="UO1"></el-option>
                      <el-option label="第二类非计划停运" value="UO2"></el-option>
                      <el-option label="第三类非计划停运" value="UO3"></el-option>
                      <el-option label="第四类非计划停运" value="UO4"></el-option>
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item
                    :key="domain.key1"
                    :prop="'domains.' + index + '.qsfw'"
                    :rules="{
                      required: true, message: '不能为空', trigger: 'blur',
                    }"
                  >
                    <label>时间范围</label>
                    <el-input-number v-model="domain.qsfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <!-- <el-input v-model="domain.qsfw" size="small"></el-input> -->
                  </el-form-item>
                  
                  <el-form-item
                    :key="domain.key2"
                    :prop="'domains.' + index + '.zzfw'"
                    :rules="{
                      required: true, message: '不能为空', trigger: 'blur',
                    }"
                  >
                    <label>至  </label>
                    <el-input-number v-model="domain.zzfw" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <!-- <el-input v-model="domain.zzfw" size="small"></el-input> -->
                  </el-form-item>

                  <el-form-item
                    :key="domain.key3"
                    :prop="'domains.' + index + '.zsxs'"
                    :rules="{
                      required: true, message: '不能为空', trigger: 'blur',
                    }"
                  >
                    <label>折算比例</label>
                    <el-input-number v-model="domain.zsxs" :min="0" :precision="2" :step="0.1" size="small"></el-input-number>
                    <!-- <el-input v-model="domain.zsxs" size="small"></el-input> -->
                    <el-button @click.prevent="removeDomain(domain)" size="small" class="delhang_class">删除行</el-button>
                  </el-form-item>
                </div>
           </el-form>
      </div>
</div>

data定义部分

export default {
  name: 'dynamicForm',
  data () {
    return {
    dynamicValidateForm: {
          domains: [{
            lx:'',//状态符
            qsfw:'',//起始范围
            zzfw:'',//截止范围
            zsxs:'',//折算比例
          }],
        },
    }
  }
}

在methods里增加的方法

methods: {
          removeDomain(item) {//删除行
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
              this.dynamicValidateForm.domains.splice(index, 1)
            }
          },
          addDomain() {//新增行
            this.dynamicValidateForm.domains.push({
              lx:'',//状态符
              qsfw:'',//起始范围
              zzfw:'',//截止范围
              zsxs:'',//折算比例
              key: Date.now()
            });
          },
          submitForm(formName) {//保存按钮
            this.$refs[formName].validate((valid) => {
              if (valid) {
                console.log(this.dynamicValidateForm.domains)
                this.savemoban(this.dynamicValidateForm.domains)
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          clear_btn(formName) {
            this.$refs[formName].resetFields();
          },
          savemoban(domainsdata){//存为模板
            let params = {
              zsgs:domainsdata,
            };
            this.servicept
            .post("/sbdZhzbFx/saveCaclueFormula", params)
            .then((res) => {
              if(res.data.msg=="成功"){
                this.$message.success("成功!");
              }else{
                this.$message.error("失败!");
              }
            }).catch((res) => {
            });
          },      
},

需要注意的一点:

普通表单验证单项依靠的是prop而动态生成的表单要用:prop

书写的语法是:prop="'domain.' + index +'.lx'",domain是v-for绑定的数组,index是索引,lx是表单绑定的v-model的名称,然后用.把他们链接起来。

所以总结起来的语法就是:prop="'v-for绑定的数组.' + index + '.v-model绑定的变量'"

image.png

具体效果可以直接复制代码到本地看,需要什么表单可以自己加哦根据自己的业务需求💕💕~
谢谢大家阅读⭐️⭐️⭐️,如果喜欢,可以点赞或留言哟💕
目录
相关文章
|
7月前
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
467 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
7月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
234 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
9月前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
228 19
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
823 5
Vue使用element中table组件实现单选一行
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
11月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
867 0
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
793 3
|
11月前
|
资源调度 JavaScript PHP
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
300 0
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
247 0
|
4月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
160 15