美文网首页
iview Form组件动态添加表单,并深层校验

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

作者: 木兮君 | 来源:发表于2020-04-29 10:47 被阅读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.haomeiwen.com/subject/qoxgwhtx.html