2025年03月06日 建站教程
功能介绍：利用v-for循环批量生成el-input组件，并对指定el-input带rules验证。
1、template
<el-form
:model="searchForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<div v-for="(item, index) in searchForm.list" :key="index">
<el-form-item
:label="item.label"
:prop="'list.' + index + '.value'"
:rules="item.rules.value"
>
<el-input
v-model="item.value"
:placeholder="item.placeHolder"
></el-input>
</el-form-item>
</div>
</el-form>
2、data
data() {
return {
searchForm: {
list: [
{
index: 1,
value: "",
label: "名称：",
placeHolder: "请输入",
rules: {
value: [
{ required: true, message: "请输入名称", trigger: "blur" }
]
}
},
{
index: 2,
value: "",
label: "年龄：",
placeHolder: "请输入",
rules: {
value: [{ required: false }]
}
},
{
index: 1,
value: "",
label: "身份证号：",
placeHolder: "请输入",
rules: {
value: [
{ required: true, message: "请输入身份证号", trigger: "blur" }
]
}
}
]
},
rules: {}
}
}
本文链接：http://so.lmcjl.com/news/24375/