首页 > 其他 > 详细

iview Form组件动态添加表单,并深层校验

时间:2020-04-29 11:24:53      阅读:383      评论:0      收藏:0      [点我收藏+]

今天遇到了iview动态添加表单,并且深度验证表单的问题。
功能如图:

技术分享图片

 

科目可以动态新增,并且科目非空,成绩在0-100区间内。

  • html部分,v-for遍历form子属性scoreList。
  • 内部FormItem prop规则为[子属性].[索引].[子属性]
  • rules手动指定
...
<Table border :columns="column" :data="form.scoreList">
  <template slot-scope="{ row, index  }" slot="subject">
    <FormItem :prop="`scoreList.${index}.subject`" :label-width="0" :rules="rules.subject">
      <Select v-model="form.scoreList[index].subject" transfer>
        <Option v-for="(item,idx) in subjectList" :key="index + ‘_‘ + idx" :value="item.value"
          :disabled="hasSelectedSubject[item.value]">
          {{item.label}}
        </Option>
      </Select>
    </FormItem>
  </template>
  <template slot-scope="{ row, index }" slot="score">
    <FormItem :prop="`scoreList.${index}.score`" :label-width="0" :rules="rules.score">
      <Input v-model="form.scoreList[index].score" />
    </FormItem>
  </template>
  <template slot-scope="{ row, index }" slot="edit">
    <Button type="error" size="small" @click="delSubject(index)">删除</Button>
  </template>
</Table>
...
data () {
    return {
      // 表单数据
      form: {
        name: ‘‘,
        sex: ‘male‘,
        provinceCode: ‘‘,
        cityCode: ‘‘,
        scoreList: [{
          subject: ‘‘,
          score: ‘‘
        }]
      },
      rules: {
        ...
        subject: [
          { required: true, message: ‘请选择科目!‘, trigger: ‘change‘ }
        ],
        score: [
          { required: true, message: ‘请输入成绩!‘, trigger: ‘blur‘ },
          { pattern: /^\d+$/, message: ‘成绩必须为整数!‘, trigger: ‘blur‘ },
          {
            validator (rule, value, callback) {
              value = Number(value)
              if (value <= 100 && value >= 0) {
                callback()
              } else {
                callback(new Error(‘成绩必须为0-100之间的整数!‘))
              }
            },
            message: ‘请输入成绩!‘, trigger: ‘blur‘
          }
        ]
      },
      ...
    }
  }

 

iview Form组件动态添加表单,并深层校验

原文:https://www.cnblogs.com/shb190802/p/12800726.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!