Vue3动态表单-使用Element UI实现高可配置表单

在大型企业应用中，只需要关注表单的内容，不必考虑表单的布局和校验，表单的创建和维护就变得尤为容易。本文将以Element UI为例，详细阐述如何使用vue3实现动态的，高度可配置的表单。

在Vue3中，创建动态表单的步骤如下：

1. 定义需要添加的表单项。
2. 在草图中动态加载标签/输入框/按钮等Element UI组件。
3. 绑定事件并处理其逻辑，如校验、提交等。

项目结构

我们的项目结构如下：

• App.vue (顶层应用组件)

• components/

  • ElementForm.vue (表单的主体组件)
  • FormItem.vue (单个的表单项组件)

首先，先创建一个包含form对象和formItems数组的ElementForm.vue文件。

javascriptCopy code
<script>
export default {
  data() {
    return {
      form: {},
      formItems: [{
        label: "用户名",
        model: "username",
        default: "",
        placeholder: "请输入用户名",
        type: "input",
        rules: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        valueType:'text',
      },
      {
        label: "密码",
        model: "password",
        default: "",
        placeholder: "请输入密码",
        type: "input",
        rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
        valueType:'password',
      },
      {
        label: "性别",
        model: "gender",
        default: '',
        placeholder: "请选择性别",
        type: "select",
        options: [{ value: 'male', label: '男' }, { value: 'female', label: '女' }],
        rules: [{ required: true, message: "请选择性别", trigger: "change" }],
      }]
    }
  },
}
</script>

在其中，变量form保存的是表单的值用于数据提交，formItems则是用来定义表单结构。表单项定义了标签、模型、默认值、占位符、类型、规则和值的类型。

接下来，在ElementForm.vue文件的模版中，我们将遍历formItems数组以动态的创建Element UI的表单项。

<template>
    <el-form :model="form" :rules="rules" ref="form">
      <div v-for="(item, index) in formItems" :key="index">
        <FormItem :config="item" v-model="form[item.model]" />
      </div>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
</template>

我们使用v-for来遍历formItems并使用自定义的FormItem组件来渲染每一个表单项。我们通过v-model将form对象绑定到每一个表单项上，然后通过提交处理函数handleSubmit来事件监听器上验证并提交表单，重置处理函数handleReset监听重置按钮。

接着，我们需要在FormItem.vue文件中根据表单项的配置生成响应的Element UI组件。我们使用props接收表单项的配置和模型值。

<script>
    export default {
      props: {
        modelValue: {},
        config: {
          type: Object,
          default: () => ({})
        },
      },
      emits: ['update:modelValue']
    }
</script>

然后再根据配置项的类型动态渲染对应的Element UI组件。

<template>
    <el-form-item :label="config.label" :prop="config.model">
      <el-input v-if="config.type === 'input'" v-model="modelValue" :type="config.valueType" placeholder = "config.placeholder"></el-input>
      <el-select v-else-if="config.type === 'select'" v-model="modelValue"  placeholder = "config.placeholder">
        <el-option v-for="(option, index) in config.options" :key="index" :label="option.label" :value="option.value"></el-option>
      </el-select>
    </el-form-item>
</template>

以上就是如何在Vue3和Element UI中实现动态表单的步骤。这样我们可以将数据逻辑从视图中分离出来，对数据的改动将会反映到视图上，我们只需要关心数据的处理即可。同时，这样我们可以更方便的添加、删除和改变表单项，而不需要在模版中做任何更改。

希望这篇文章对你在Vue3和Element UI中实现动态表单有所帮助。如果你有任何问题或者想法，欢迎在下方留言。