vue3 el-form动态生成表单

使用 Vue3，我们可以通过渲染函数或者JSX来动态生成表单。下面是一个使用渲染函数的例子：

<template>
  <el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="80px">
    <el-form-item v-for="field in fields" :key="field.key" :label="field.label" :prop="field.key">
      <el-input v-if="field.type === 'input'" v-model="form[field.key]" placeholder="请输入内容"></el-input>
      <el-select v-if="field.type === 'select'" v-model="form[field.key]" placeholder="请选择">
        <el-option v-for="option in field.options" :key="option.value" :label="option.label" :value="option.value"></el-option>
      </el-select>
      <!-- 其他类型的表单项 -->
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fields = [
      { label: '姓名', key: 'name', type: 'input' },
      { label: '性别', key: 'gender', type: 'select', options: [
        { label: '男', value: 'male' },
        { label: '女', value: 'female' }
      ]},
      // 其他表单项
    ];

    const form = ref({});

    const rules = {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      // 其他表单项的校验规则
    };

    const submitForm = () => {
      // 提交表单的处理逻辑
    };

    return {
      fields,
      form,
      rules,
      submitForm,
    };
  },
};
</script>

这个例子中，我们定义了一个 `fields` 数组，里面包含了每个表单项的配置。根据 `fields` 数组中的配置生成表单，使用 `v-if` 根据不同的类型渲染不同的表单项。最后，我们把表单数据绑定到 `form` 对象上，使用 `ref` 把 `form` 对象变成响应式数据，这样在表单中输入数据时，`form` 对象也会自动更新。同时，我们还定义了表单项的校验规则，以及提交表单的处理逻辑。