美文网首页
element-ui 循环for rule校验方法

element-ui 循环for rule校验方法

作者: d34skip | 来源:发表于2020-09-03 14:59 被阅读0次
<div>
  <el-form :model="listQuery" ref="listQuery">
// 循环的form
    <el-row v-for="item, index in listQuery.list" :key="index">
      <el-col>
// 注意这里的prop和rules
        <el-form-item label="名称:" label-width="105px" :prop="'list.'+index+'.value'" :rules="rules.value">
          <el-input v-model="item.value"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div @click="submitForm">提交</div>
</div>


data () {
  return {
    listQuery: {
      list: [{value: ''}, {value: ''}]
    },
    // 循环校验的rules
    rules: {
        value: [
          { required: true, message: '请填写', trigger: 'blur' }
        ]
      }
  }
}


// 触发校验的 提交按钮
submitForm () {
  this.$refs['listQuery'].validate((valid) => {
    if (valid) { // 判断校验规则
  }
})

相关文章

网友评论

      本文标题:element-ui 循环for rule校验方法

      本文链接:https://www.haomeiwen.com/subject/rxtosktx.html