element表单中一个el-form-item下多个form-item项校验(循环校验)

在vue+element的项目中,需要对form表单下的一个form item中校验多项数据:

1.Dom结构如下

表单验证的时候:

prop改为 “:prop”,形式为’List.’+index+’.startDate’

‘List.’+index+’.startDate’就是数据结构与数据

每一个循环中的都需要加:rules

```

<el-form :model="resumes" size="mini" :rules="rules" ref="resumes">

      <div v-for="(item, index) in resumes.List" :key="index">

        <el-form-item label="开始时间:" :prop="'List.'+ index +'.startDate'" :rules="rules.startDate">

          <el-input v-model="item.startDate" size="mini" />

        </el-form-item>

        <el-form-item label="结束时间:" :prop="'List.'+ index +'.endDate'" :rules="rules.endDate">

          <el-input v-model="item.endDate" type="password" />

        </el-form-item>

        <el-form-item label="手机号:" :prop="'List.'+ index +'.phone'" :rules="rules.phone">

          <el-input v-model="item.phone" size="mini" />

        </el-form-item>

      </div>

    </el-form>

```

2. data结构如下:rules为个表单项的验证规则

```

data() {

  return {

    resumes: {

      List: [{

        startDate: '',

        endDate: '',

        phone: ''

      }]

    },

    rules: { // 添加校验

      startDate: [{

        required: true,

        message: '请输入开始时间',

        trigger: 'blur'

      }],

      endDate: [{

        required: true,

        message: '请输入结束时间',

        trigger: 'blur'

      }],

      phone: [{

        required: true,

        message: '请输入手机号',

        trigger: 'blur'

      }],

    },

};

```


```

<el-table-column :render-header="renderHeader">

  <template slot-scope="scope">

      {{ scope.row.user }}

  </template>

</el-table-column>

``` 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。