功能介绍:利用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: {} } }
v-for批量生成el-input并动态绑定v-model(实时获取input输入值和索引)
标签: el-input, rules验证, v-for循环, 动态绑定
上面是“v-for循环生成el-input带rules验证”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2535.html
workflows工作流
哈利波特魔法ComfyUI工作流
一只蚊子被嵌在琥珀中ComfyUI工作流
一座巨大的野兽派建筑漂浮在热带风景中的贫民
沙漠里一只红黑相间的蝎子
一只乌鸦栖息在一盏神灯上
强大的长袍法师ComfyUI工作流
一条赤壁龙从蛋中孵化出来ComfyUI工作流
半透明的玻璃苹果ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!