Vue3.0 根据JSON对象生成指定form表单

在平常开发中，form表单是写的最多且最繁琐的一个功能。为了避免代码冗余，我把form表单抽出来当做一个组件并且根据数据来动态生成基本表单

现在只写了input和select 后续会加上更多，且优化双向绑定的代码

用到的技术

1.Vue3基础知识
2.Element-plus组件

定义formTemplate

判断是否需要布局(el-col)
判断是否需要form包裹(el-form-item)
根据传递的参数来生成指定组件(components)：比如输入框 下拉框等

注意：使用的时候需要全局注册一下指定组件 具体看 倒数第二步 全局注册组件

formTemplate.vue

默认输入框组件

wxInput.vue

默认下拉框组件

为了防止枚举写一遍 options又写一遍的情况 我把枚举值引入进来了 （baseSelectSource）
如果枚举写了，就直接传dataType即可

meta.js

const sex = [
  {
    label: "男",
    value: "man",
  },
  {
    label: "女",
    value: "woman",
  },
];

export const baseSelectSource = {
  sex,
};

wxSelect.vue

全局注册组件

使用该组件的时候如果不全局注册需要的组件 这样会导致生成失败
registerComponent.js

import FormTemplate from "@/components/FormTemplate/index.vue";
import wxInput from "@/components/FormTemplate/components/wxInput.vue";
import wxSelect from "@/components/FormTemplate/components/wxSelect.vue";

export default function install(app) {
  app.component("wx-form", FormTemplate);
  app.component("wx-input", wxInput);
  app.component("wx-select", wxSelect);
}

注意：记得在main里面引入registerComponent.js文件 否则注册失败

main.js

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@/assets/css/index.less";
import registerComponent from "./registerComponent";

const app = createApp(App);

app.use(registerComponent);
app.use(ElementPlus);
app.mount("#app");

使用方法

index.vue

注意：使用时记得用el-form和el-row包裹一下 因为我设置的默认使用布局和form包裹住

效果图

效果图