需求：给了固定的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: ''
}
] //参建单位列表
},文章到此结束，希望对你有所帮助~
