Vue iview 组件中通过 v-for 循环动态生成 form 表单进行表单校验

介绍

在 Vue 和 iview 组件库中，我们经常会遇到需要对表单进行校验的情况。而当表单中的字段比较多，且需要动态进行生成时，我们可以使用 v-for 指令来简化代码的编写。本文将介绍如何利用 Vue 和 iview 中的 v-for 指令来动态生成 form 表单，并进行表单校验。

准备工作

在开始之前，我们需要先安装并配置好 Vue 和 iview。

安装 Vue：使用 npm 或 yarn 进行安装。
```
npm install vue
```
或
```
yarn add vue
```
安装 iview：同样使用 npm 或 yarn 进行安装。
```
npm install iview
```
或
```
yarn add iview
```

在项目代码中引入 Vue 和 iview。

// main.js
import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView)

new Vue({
  el: '#app',
  // ...
})

动态生成 form 表单

数据结构设计

首先，我们需要设计一个存储表单字段的数据结构，以及对应的表单校验规则。

data() {
  return {
    formList: [
      { name: '用户名', field: 'username', rules: [{ required: true, message: '请输入用户名' }] },
      { name: '密码', field: 'password', rules: [{ required: true, message: '请输入密码' }] },
      // 更多字段...
    ],
    formData: {},
    formRules: {}
  }
}

在上述代码中，我们使用一个数组 formList 来存储每个表单字段的相关信息，包括字段名 name、字段标识 field，以及校验规则 rules。

使用 v-for 动态生成表单

接下来，我们可以利用 v-for 指令来动态生成表单。

<template>
  <Form :model="formData" :rules="formRules" :label-width="80">
    <FormItem v-for="(item, index) in formList" :key="index" :label="item.name" :prop="item.field">
      <Input v-if="item.type === 'input'" v-model="formData[item.field]" />
      <Select v-else-if="item.type === 'select'" v-model="formData[item.field]">
        <Option v-for="(option, key) in item.options" :key="key" :value="key">{{ option }}</Option>
      </Select>
      <!-- 更多类型的表单控件 -->
    </FormItem>
    <Button type="primary" @click="submitForm">提交</Button>
  </Form>
</template>

在以上代码中，我们使用 v-for 指令循环遍历 formList 数组，根据每个表单字段的类型来动态生成不同的表单控件，如 Input 输入框和 Select 下拉框等。

同时，我们绑定了一个 formData 对象来实现双向数据绑定，以便在点击提交按钮时获取表单数据。

表单校验

在 iview 中，可以通过在表单字段上绑定相应的 prop 值，并设置 v-model 指令来实现表单校验。

created() {
  this.formList.forEach(item => {
    this.$set(this.formRules, item.field, item.rules);
  });
}

在以上代码中，我们使用 formList 数组中的每个字段的 field 值作为 formRules 对象的键，并将对应的校验规则设置为值。

同时，我们还需要在提交表单时进行校验。

methods: {
  submitForm() {
    this.$refs.form.validate((valid) => {
      if (valid) {
        // 表单校验通过，提交表单数据
        // ...
      } else {
        // 校验未通过
      }
    });
  }
}

在以上代码中，我们通过 $refs 引用到 Form 组件，并调用其 validate 方法进行表单校验。校验通过时，我们可以进行表单的提交操作；校验未通过时，可以进行相应的错误提示。

结语

通过以上的步骤，我们成功地利用 Vue 和 iview 中的 v-for 指令来动态生成 form 表单，并实现了表单校验。这样不仅可以减少代码量，还能提高效率。希望这篇博客对你有所帮助，谢谢阅读！

本文来自极简博客，作者：天使之翼，转载请注明原文链接：Vue iview 组件中通过 v-for 循环动态生成 form 表单进行表单校验