当前位置: 首页 > article >正文

el-form动态标题和输入值,并且最后一个输入框不校验

需求:给了固定的label,叫xx单位,要输入单位的信息,但是属性名称都一样的,UI画图也是表单的形式,所以改为动态添加的形式,实现方式也很简单,循环就完事了,连着表单校验也动态

1.效果如下 

2.代码实现+讲解

因为需求是最后一个单位没有必要必填,所以在rules这里判断了一下,主要就是循环遍历了el-form-item,之后prop为了区分也是用index来区分了

 <el-dialog title="新建单位" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="unitDialog" width="30%">
            <el-form
                :model="formInline"
                ref="unitRuleForm"
                label-width="130px"
                class="demo-form-inline"
                label-position="left"
            >
                <el-form-item
                    v-for="(item, index) in formInline.formData"
                    :key="index"
                    :label="item.organizations_type"
                    :prop="'formData[' + index + '].organizations_name'"
                    :rules="
                        index < formInline.formData.length - 1
                            ? {
                                  required: true,
                                  message: `${item.organizations_type}不能为空`,
                                  trigger: 'blur'
                              }
                            : null
                    "
                >
                    <el-input v-model="item.organizations_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="unitDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveUnitData()">确 定</el-button>
            </span>
        </el-dialog>
formInline: {
                formData: [
                    {
                        project_id: 0,
                        organizations_type: 'xx单位1',
                        organizations_name: ''
                    },
                    {
                        project_id: 0,
                        organizations_type: 'xx单位2',
                        organizations_name: ''
                    },
                    {
                        project_id: 0,
                        organizations_type: 'xx单位3',
                        organizations_name: ''
                    },
                    {
                        project_id: 0,
                        organizations_type: 'xx单位4',
                        organizations_name: ''
                    },
                    {
                        project_id: 0,
                        organizations_type: 'xx单位5',
                        organizations_name: ''
                    },
                    {
                        project_id: 0,
                        organizations_type: 'xx单位6',
                        organizations_name: ''
                    }
                ] //参建单位列表
            },

 文章到此结束,希望对你有所帮助~


http://www.kler.cn/a/315026.html

相关文章:

  • CCI3.0-HQ:用于预训练大型语言模型的高质量大规模中文数据集
  • 如何保护 Microsoft 网络免受中间人攻击
  • OceanStor Pacific系列 8.1.0 功能架构
  • 【VIM】vim 常用命令
  • UniApp 应用、页面与组件的生命周期详解
  • 搭建深度学习开发环境
  • Python 课程16-OpenCV
  • C++门迷宫
  • C++高精度计时方法总结(测试函数运行时间)
  • Axios基本语法和前后端交互
  • 【数据结构】排序算法---计数排序
  • Cpp类和对象(中续)(5)
  • Rasa对话模型——做一个语言助手
  • Qt窗口——QToolBar
  • JVM常见面试题(三):类加载器,双亲委派模型,类装载的执行过程
  • python中ocr图片文字识别样例(二)
  • Spring MVC设置请求头和响应头的Header
  • Unity DOTS物理引擎的核心分析与详解
  • 植物大战僵尸【源代码分享+核心思路讲解】
  • [每日一练]MySQL中的正则表达式的应用
  • Day 9:1306 跳跃游戏III
  • 神经网络构建原理(以MINIST为例)
  • Java | Leetcode Java题解之第416题分割等和子集
  • 国内可以使用的ChatGPT服务【9月持续更新】
  • 828华为云征文 | 云服务器Flexus X实例:多智能体对话框架 AutoGen 部署和实例运行
  • 重修设计模式-结构型-门面模式