代码编织梦想

<el-form ref="bannerImgSettingForm" label-width="80px" :model="bannerImgSettingForm" :rules="rules" >
   <div v-for="(item, index) in bannerImgSettingForm.bannerImgSettingList" :key="index">
     <el-form-item
     :label="item.urlLabel" 
     :prop="`bannerImgSettingList[${index}].link`"
     :rules="rules.link"
     >
       <el-input v-model="item.link" clearable ></el-input>
     </el-form-item>
   </div>
   <el-form-item>
     <el-button @click="handleCancel">取消</el-button>
     <el-buttontype="primary" @click="onSubmit2('bannerImgSettingForm')">确认</el-button>
   </el-form-item>
 </el-form>
rules: {
  link: [
    { validator: validatePass, trigger: 'blur' }
  ],
},

bannerImgSettingForm: {
  bannerImgSettingList: [
    {
      urlLabel: '链接1:',
      link: ''
    },
    {
      urlLabel: '链接2:',
      link: ''
    },
    {
      urlLabel: '链接3:',
      link: ''
    },
    {
      urlLabel: '链接4:',
      link: ''
    },
    {
      urlLabel: '链接5:',
      link: ''
    }
  ],
},
onSubmit2(formName) {
 this.$refs[formName].validate((valid) => {
   if (valid) {
     console.log(this.bannerImgSettingForm.bannerImgSettingList,'校验通过');
   } else {
     console.log('error submit!!');
     return false;
   }
 });
},
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_46302247/article/details/129185913

elementui->el-form中数组遍历循环做规则-爱代码爱编程

 碰到了el-form关于对象中数组的一个坑,关于el-form中数组遍历循环做规则,如果后端传过来的是数组,可以把它加到一个空对象里。 <!-- :model绑定的一定是对象 --> <el-form ref="envForm" :model="envVar"> <!--envVariables是envVar里的数

v-for循环<el-form-item>时应用popover-爱代码爱编程

element-ui使用v-for循环el-form-item,如果循环的每栏都有popover,v-for 渲染多个 popover, 那么使用指令v-popover指向 Popover 的索引ref的方式触发,popov

el-form-item rules validator validate函数传参-爱代码爱编程

validator只能传3个参数,(rule, value, cb),如果想传入额外的参数来做校验 那么需要通过在rules上嵌套一层,传入参数,如row,之后在函数中定义validator 就可以直接用到自己需要的参数了,

el-form的rule无法校验(没有效果)的几个注意点-爱代码爱编程

使用this.$refs[xxx]方式的朋友要注意el-form声明的ref=名称 必须与xxx一致:rule = “rule”, 我们可以在data(){retrun { }} 中定义rule, 也可以直接在el-form

vue el-爱代码爱编程

在el-form中正确使用rules校验是非常重要的,rules使用不当容易出现规则不生效、规则一直被触发等各种现象(如错误信息一直提示不得为空)。 下面记录了常见的rules实现方式,以做参考。 1. 在el-form上

vue elementui form组件动态添加el-爱代码爱编程

先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《20

el-爱代码爱编程

目标 官网的表单项都是写死在代码里面的,但是实际我们的表单大多是通过json配置出来的,就需要动态的根据配置信息做表单校验 例如: [{ name: "商品名称", key: "productName", value: "", type: "input", must: true, placeholder: "请输入", l