记一次vue+elementUI页面添加动态表单

最新推荐文章于 2025-05-07 19:33:05 发布
原创 最新推荐文章于 2025-05-07 19:33:05 发布 · 1.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文详细记录了一次在Vue项目中遇到的表单元素无法选择和输入的Bug，通过调整DOM结构，将<el-form-item>移出<div>标签，成功解决了select和input无法交互的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先，页面是这样的
在这里插入图片描述
当点击增加明细时，页面会新添加红色框中的内容。同时，会带有一个删除的按钮。
在这里插入图片描述
上图为点击增加明细后的效果图。

页面代码:

<template>
  <div>
    <el-dialog
      :title = "title"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <div>
        <el-form :model="inputForm" ref="inputForm" v-loading="loading"
                 label-width="120px">
          <el-col>
            <el-form-item label="审批名称" prop="name"
                          :rules="[
                      {required: true, message:'审批名称不能为空', trigger:'blur'}
                     ]">
              <el-input v-model="inputForm.name" placeholder="请输入审批名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="审批说明" prop="explains"
                          :rules="[
                     ]">
              <el-input type="textarea" v-model="inputForm.explains" placeholder="审批说明"     ></el-input>
            </el-form-item>
          </el-col>

          <div style="padding-top: 10px;padding-bottom: 20px;padding-left: 100px;font-size: 20px;">
            明细
          </div>

          <div v-for="(item, index) in inputForm.detailsList" :key="index">
              <el-col>
                <el-form-item label="物资名称"
                              :rules="[
                                      {required: true, message:'物资名称不能为空', trigger:'blur'}
                             ]">
                  <el-select v-model="item.material.id" placeholder="请选择物资名称"  style="width: 100%;" >
                    <el-option
                      v-for="x in materialData"
                      :key="x.id"
                      :label="x.name"
                      :value="x.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="申请数量" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
                  :rules="[
                                    {required: true, message:'申请数量不能为空', trigger:'blur'}
                  ]">
                  <el-input v-model="item.material.quantityDrugs" placeholder="请填写物资数量"></el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="源仓库"
                              :rules="[
                              ]">
                  <el-select v-model="item.source.id" placeholder="请选择希望申请的仓库"  style="width: 100%;">
                    <el-option
                      v-for="x in sourceData"
                      :key="x.id"
                      :label="x.name"
                      :value="x.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="目标仓库"
                              :rules="[
                              ]">
                  <el-select v-model="item.target.id" placeholder="请选择希望进入的仓库"  style="width: 100%;">
                    <el-option
                      v-for="x in targetData"
                      :key="x.id"
                      :label="x.name"
                      :value="x.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            <i class="el-icon-delete" v-if="inputForm.detailsList.length > 1" @click="deleteItem(item, index)" style="padding-left: 40px"></i>
          </div>
        </el-form>
      </div>
      <el-button @click="addItem" type="primary">增加明细</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary"  @click="doSubmit()" v-noMoreClick>确定		     </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        visible: false,
        inputForm: {
          id: '',
          name: '',
          explains: '',
          detailsList: [
            {
              source: {
                id: '',
                name: ''
              },
              target: {
                id: '',
                name: ''
              },
              material: {
                id: '',
                name: '',
                quantityDrugs: ''
              }
            }
          ]
        },
        sourceData: [],
        targetData: [],
        materialData: [],
        loading: false
      }
    },

    methods: {
      init () {
        debugger
        this.title = '发起申请'
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.getSourceData()
          this.getTargetData()
          this.getMaterialFromMaster()
        })
      },
      change (e) {
        this.$forceUpdate()
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            let tag = true
            this.inputForm.detailsList.some(item => {
              if (item.material.id === '') {
                tag = false
                this.$message({
                  message: '物资名称不能为空,请填写',
                  type: 'warning'
                })
                return true
              }
              if (item.material.quantityDrugs === '') {
                tag = false
                this.$message({
                  message: '数量不能为空',
                  type: 'warning'
                })
                return true
              }
              if (item.source.id === '') {
                tag = false
                this.$message({
                  message: '源仓库不能为空',
                  type: 'warning'
                })
                return true
              }
              if (item.target.id === '') {
                tag = false
                this.$message({
                  message: '目标仓库不能为空',
                  type: 'warning'
                })
                return true
              }
            })
            if (tag) {
              console.log(this.form)
              this.$http({
                url: '/applicationRecord/application/insert',
                method: 'post',
                data: this.inputForm
              }).then(({data}) => {
                if (data && data.success) {
                  this.visible = false
                  this.$message.success(data.msg)
                  if (callback != null) {
                    callback('tb_material_application', this.businessId)
                  }
                }
              })
            }
          }
        })
      },
      addItem () {
        this.getSourceData()
        this.getTargetData()
        this.getMaterialFromMaster()
        this.inputForm.detailsList.push({
          source: {
            id: ''
          },
          target: {
            id: ''
          },
          material: {
            id: '',
            quantityDrugs: ''
          },
          sourceData: this.sourceData,
          targetData: this.targetData,
          materialData: this.materialData
        })
      },
      // 获取源仓库的数据
      getSourceData () {
        this.loading = true
        this.$http({
          url: '/warehouse/wareHouse/getSouTarWareHouse',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.sourceData = data.data
            this.loading = false
          }
        })
      },
      // 获取目标仓库的数据
      getTargetData () {
        this.loading = true
        this.$http({
          url: '/warehouse/wareHouse/getSouTarWareHouse',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.targetData = data.data
            this.loading = false
          }
        })
      },
      // 获取主仓库所有物资
      getMaterialFromMaster () {
        this.loading = true
        this.$http({
          url: '/warehouse/wareHouse/getMaterialFromMaster',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            this.materialData = data.data
            this.loading = false
          }
        })
      },
      deleteItem (item, index) {
        this.inputForm.detailsList.splice(index, 1)
      }
    }
  }
</script>

当时出现了一个bug，就是页面渲染出来了，但是select和input没法选择和输入，后来发现是因为把”删除“的< li > 标签放到了< el-form-item >里。

还有个特搞笑的事，没发现原因：
页面上有个"明细"的 < div > ,但是在找上面的这个bug时，我们把一个
< el-form-item > 从循环中拿出来放到了< div > 上面，此时select,input可以选择和输入；放到下面，则不可以。

想知道的，可以探究下。

vue 使用element-ui实现table表单列展示与隐藏
FREE-FLY的博客
09-30 8万+
详细代码： github上查看方式 查看窗口 在公司做vue 动态设置element中table表单列的展示方式，点击复选框选中时，表单对应的显示，补选中时，隐藏，因为在网上找相关案例，没有一个比较合适的解决方法，所以自己按照自己的方法去实现此相关功能，希望对大家有帮助。 页面table表单对应的展示与隐藏 首次默认把需要展示的数据保存到浏览器的localstroang中 ...
Vue+ElementUI实现表单动态渲染、可视化配置的方法
08-27
Vue+ElementUI实现表单动态渲染、可视化配置的方法 本文主要介绍了使用 Vue+ElementUI 实现表单动态渲染、可视化配置的方法。该方法可以实现动态渲染表单、可视化配置，满足不同场景下的需求。 一、动态渲染的概念...
vue+elementUI实现动态增加表单项并添加验证
祖先生的博客
08-04 8585
参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。 htmt部分： <el-form :model="environmentForm" ref="environmentForm"> <el-row :gutter="24" v-for="(item, index) in environmentForm.items" :key="item.key" >
实现动态添加和删除 input 框
最新发布
MR_bailu的博客
05-07 233
这个实现方式利用了 Vue 的响应式特性，通过操作数组来实现动态增减界面元素。Element UI 的组件样式和交互行为可以保持界面美观和用户体验一致性。
vue 使用 element ui动态添加表单
weixin_30647065的博客
03-10 347
html部分 <div class="hello"> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label...
Vue Element UI动态生成的表单并校验
分享与记录前端点滴
07-10 2488
表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定。通常是用于 input 的双向绑定，但是它不会向子组件传递数据。
Element UI form表单及select下拉框实现动态添加和删除
Apricity_F的博客
03-27 2931
结合antv x6 流程图，实现需求，每个流程图节点均可设置当前节点对应审批部门和用户，部门会签节点可设置多部门多用户，动态添加部门及用户。当前节点已配置人员部门可回显，当前节点已配置人员删除，回显为空。需求为可动态选择用户及部门，并具备回显功能。
vue+ElementUI实现订单页动态添加产品数据效果实例代码
08-30
Vue.js是一款流行的前端框架，ElementUI是饿了么出品的一款基于Vue的UI组件库，本篇文章主要介绍了如何使用Vue.js和ElementUI实现订单页动态添加产品数据效果实例代码。 知识点1：Vue.js的基本概念 在本篇文章中，...
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
本文将详细讲解如何在Vue+ElementUI环境中解决这个问题，即在关闭对话框时清空验证和清除表单数据。 首先，我们需要在对话框的取消按钮上添加一个点击事件，例如： ```html ('addGroupData')">取消 ('...
vue+elementui实现多层树形菜单
10-16
如果你的应用使用Vue Router进行路由管理，你还可以将树形菜单的节点与路由链接起来，实现点击菜单跳转页面的功能。这通常涉及到动态路由和`beforeRouteLeave`导航守卫。 ### 6. 自定义样式与扩展 Element UI的树形...
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
10-15
在开发过程中，有时我们需要实现多图片上传与回显的功能，尤其是在创建或编辑表单时，用户可能需要上传多张图片，并在页面加载时能够显示出已保存的图片。本文将详细介绍如何使用 Vue 和 Element UI 来实现这一功能...
elementui动态添加表格
weixin_53325981的博客
09-07 1227
【代码】elementui动态添加表格。
vue element-ui 循环表单
qq_36437172的博客
08-28 3883
需求场景：表单中有用户基本信息，同时用户可以具有0个或多个项目经验，由此分析项目经验应该是数组的，那么我们应该如何制作这个循环表单呢？ <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <div class="item-title">工作案例-其他工作案例</div>...
vue2 element ui 表单 动态增加表单项 表单项值不可重复 select多选
zbailing的博客
06-27 609
1、select为多选时，默认值需设置为[]，否则未填值前就会报校验错误。2、表单必须为object，不能用[ ]，会报错。
基于element-ui实现的vue版的动态表单
weixin_34370347的博客
07-23 612
日常开发中 有大量的表单需要填写 涉及到表单 就会有 对于表单的验证 还有就是表单中的顺序 比如 一开始需求是 实现一个表单饿了么的代码<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.name"&g...
Vue+ElementUI实现点击加号动态添加
qq_42753983的博客
12-28 1303
1.需求是点击加号图标往下增加，最多增加5行，最少显示一行（每条前面输入框不能为空及每条的前面输入框的值不能重复）
element-ui实现动态添加表单项并实现事件触发验证验证
qq_45118892的博客
02-18 4231
实现动态添加表单活动
ElementUI表单构建
Major_S的博客
03-27 669
ElementUI表单构建ElementUI表单构建ElementUI表单构建 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域">
使用Form Generator解决前端vue+elementUI动态表单功能
热门推荐
Songywaa的博客
09-03 2万+
使用场景： 在添加数据时候，页面上有固定的一部分表单，而另一部分表单相当于扩展属性，想做成动态生成，产品经理可以自己通过配置，页面就有了扩展属性的表单； 关于Form Generator描述 网站网址：添加链接描述 GitHub：添加链接描述 网站描述：基于vue 的element UI 表单设计及代码生成器，可视化设计表单，一键生成原生的vue单页表单代码； vscode插件：form-generator-plugin 具体实现 1、 2、前台页面如何使用 为了方便我们自己测试，就先在前
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值