zoukankan      html  css  js  c++  java
  • iview Form组件动态添加表单,并深层校验

    今天遇到了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'
              }
            ]
          },
          ...
        }
      }
  • 相关阅读:
    JavaScript数据类型(第一天)
    数据库的事务隔离级别
    SSH(远程登录)原理
    Hadoop安装
    activiti学习第二天
    activiti学习第一天
    .net调用系统软键盘(兼容win7及win10)
    使用Blend设计出符合效果的WPF界面
    Mysql的收获
    PHP文件上传安全处理的步骤
  • 原文地址:https://www.cnblogs.com/shb190802/p/12800726.html
Copyright © 2011-2022 走看看