功能介绍:利用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,我们会在看到邮件的第一时间内为您处理!