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: ''
                    }
                ] //参建单位列表
            },

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值