前言：通常中后台系统都会伴随着大量的表单组件，随之就是重复的表单组件代码的编写，枯燥且乏味。作为懒惰成性的FE打字员来说这是万万不能忍受的。是否有像写配置文件一样来写表单组件的方式呢？正是基于这种思想，一款基于 Vue3 和 arco-design 的表单生成组件诞生了。

Form-Render4-Vue3-Pro

form-render4-vue3-pro 脱胎于 form-render4-vue3，在form-render4-vue3的基础上更换了全新的UI组件，由 eLement-plus 迁移至 arco-design，同时新增了更多的特性。

Form-Render4-Vue3-Pro 组件基于arco-design，组件的使用方式和arco-design的Form组件使用方式完全一致，不同点在于只需要维护schema对象即可完成表单的自动生成。schema中提供了props属性，所有arco-design原生组件的属性都可通过props属性进行设置。

线上演示

效果展示

如何使用？

安装

npm install form-render4-vue3-pro --save

挂载

// main.js
import { createApp } from 'vue'
import ArcoVue from '@arco-design/web-vue';
import FormRender4Vue3 from 'form-render4-vue3-pro'
import App from './App.vue'

const app = createApp(App)
app.use(ArcoVue)
app.use(FormRender4Vue3)
app.mount('#app')

组件中使用

<template>
  <!-- 你的组件 -->
  <div>
    <form-render4-vue3-pro
      :schema="schema"
      v-model="formData"
      :option-data="optionData"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import FormSchema from './schema'

const formData = reactive({})
const optionData = reactive(FormSchema)
</script>

// ./schema.js
export const FormSchema = {
  address: {
    list: [
      {
        label: '北京',
        value: 'beijing',
      },
      {
        label: '上海',
        value: 'shanghai',
      },
      {
        label: '深圳',
        value: 'shenzhen',
      },
      {
        label: '成都',
        value: 'chengdu',
      },
    ],
    label: 'label',
    value: 'value',
  },
})
const schema = reactive({
  fields: [
    {
      type: 'input',
      title: '姓名',
      field: 'name',
      value: '',
      props: {
        placeholder: '输入姓名',
      },
    },
    {
      type: 'input',
      title: '年龄',
      field: 'age',
      value: '',
      props: {
        type: 'number',
        placeholder: '输入年龄',
      },
    },
    {
      type: 'number',
      title: '工作时长(年)',
      field: 'experience',
      value: '',
      props: {
        step: 0.5,
      },
    },
    {
      type: 'select',
      title: '现居地',
      field: 'address',
      value: '',
      props: {
        placeholder: '选择现居地',
      },
      data: {
        list: [
          {
            label: '北京',
            value: 'beijing',
          },
          {
            label: '上海',
            value: 'shanghai',
          },
          {
            label: '深圳',
            value: 'shenzhen',
          },
          {
            label: '成都',
            value: 'chengdu',
          },
        ],
        label: 'label',
        value: 'value',
      },
    },
    {
      type: 'radio',
      title: '性别',
      field: 'gender',
      value: '',
      data: {
        list: [
          {
            label: '男',
            value: 'man',
          },
          {
            label: '女',
            value: 'woman',
          },
          {
            label: '男女',
            value: 'woman&man',
          },
        ],
        label: 'label',
        value: 'value',
      },
    },
    {
      type: 'checkbox',
      title: '爱好',
      field: 'likes',
      value: '',
      data: {
        list: [
          {
            label: '唱',
            value: 'song',
          },
          {
            label: '跳',
            value: 'dance',
          },
          {
            label: 'rap',
            value: 'rap',
          },
          {
            label: '篮球',
            value: 'basketball',
          },
        ],
        label: 'label',
        value: 'value',
      },
    },
    {
      type: 'slider',
      title: '身高',
      field: 'height',
      value: '',
      props: {
        min: 100,
        max: 200,
      },
    },
    {
      type: 'switch',
      title: '信息公开',
      field: 'public',
      value: '',
    },
  ],
  props: {
    layout: 'horizontal',
    labelAlign: 'left',
  },
}

组件API

Props

参数名	类型	描述	是否必须
modelValue(v-model)	object	表单数据对象	Yes
schema	object	生成表单的JSON对象	Yes
optionData	object	select、checkbox、radio等组件选项的数据源，也可在schema中提供，但是组件会优先在optionData中查找数据	No

Methods

方法名	描述	参数	返回值
validate	校验表单全部数据	-	Promise
reset	重置表单字段	- / string[]	void

Slots

插槽名	描述	参数
footer	页脚	-	-

关于schema的字段详细描述请参考文档

目前该组件还在努力更新中，有任何需求或者问题欢迎大家积极提Issues！