vue3 配置化表单

以下是基于Vue3+Ts版本的配置化表单基础组件的实现方式：

1. 在组件中引入表单配置项和表单数据对象：

<template>
  <el-form :model="formData" :rules="rules" ref="form" label-width="100px">
    <el-row :gutter="20">
      <el-col :span="item.span" v-for="(item, index) in formConfig" :key="index">
        <component :is="item.type" :config="item" :formData="formData"></component>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { ElForm, ElRow, ElCol } from 'element-plus';
import { FormConfig, FormData } from './types';
import FormItem from './FormItem.vue';

export default defineComponent({
  name: 'ConfigForm',
  components: {
    ElForm,
    ElRow,
    ElCol,
    FormItem,
  },
  props: {
    formConfig: {
      type: Array as () => FormConfig[],
      required: true,
    },
    formData: {
      type: Object as () => FormData,
      required: true,
    },
    rules: {
      type: Object,
      default: () => ({}),
    },
  },
});
</script>

2. 在表单配置项中定义每个表单项的类型、名称、校验规则等信息：

<script lang="ts">
import { defineComponent } from 'vue';
import { FormItemConfig } from './types';
import { ElInput, ElSelect } from 'element-plus';

export default defineComponent({
  name: 'FormItem',
  components: {
    ElInput,
    ElSelect,
  },
  props: {
    config: {
      type: Object as () => FormItemConfig,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
  },
  computed: {
    isSelect() {
      return this.config.type === 'select';
    },
  },
  methods: {
    handleChange(value: any) {
      this.$emit('change', value);
    },
  },
});
</script>

3. 在表单项组件中根据表单配置项的类型渲染不同的表单项：

<template>
  <component :is="isSelect ? 'el-select' : 'el-input'" v-model="formData[config.name]" :placeholder="config.placeholder" :disabled="config.disabled" :options="config.options" @change="handleChange"></component>
</template>

4. 在父组件中使用表单组件并传入表单配置项和表单数据对象：

<template>
  <config-form :form-config="formConfig" :form-data="formData" :rules="rules"></config-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import ConfigForm from './ConfigForm.vue';
import { FormConfig, FormData } from './types';

export default defineComponent({
  name: 'App',
  components: {
    ConfigForm,
  },
  setup() {
    const formData = ref({
      name: '',
      age: '',
      gender: '',
    });

    const formConfig: FormConfig[] = [
      {
        type: 'input',
        name: 'name',
        label: '姓名',
        placeholder: '请输入姓名',
        span: 8,
        rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      },
      {
        type: 'input',
        name: 'age',
        label: '年龄',
        placeholder: '请输入年龄',
        span: 8,
        rules: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
      },
      {
        type: 'select',
        name: 'gender',
        label: '性别',
        placeholder: '请选择性别',
        span: 8,
        options: [
          { label: '男', value: 'male' },
          { label: '女', value: 'female' },
        ],
        rules: [{ required: true, message: '请选择性别', trigger: 'change' }],
      },
    ];

    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
      gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
    };

    return {
      formData,
      formConfig,
      rules,
    };
  },
});
</script>