form-render4-vue3-pro

Form-Render4-Vue3-Pro

form-render4-vue3-pro 是基于 vue3 的表单生成组件，组件包含了日常使用的表单组件，意在解决项目日常开发中表单代码重复书写的问题，提高开发效率。

项目目前支持UI库:

1. element-plus
2. arco-design

在线演示

💎 更新日志

🌈 如何使用

安装

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

// main.js
import { createApp } from 'vue'
// import FormRender4Vue3 from 'form-render4-vue3-pro/arco-design'
import FormRender4Vue3 from 'form-render4-vue3-pro/element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(FormRender4Vue3,{ warning:false }) // 安装组件时可选择警告信息打印与否 
app.mount('#app')

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

<script setup>
import { reactive } from 'vue'

const formData = reactive({})
const optionData = reactive({
  address: {
    list: [
      {
        label: '北京',
        value: 'beijing',
      },
      {
        label: '上海',
        value: 'shanghai',
      },
      {
        label: '深圳',
        value: 'shenzhen',
      },
      {
        label: '成都',
        value: 'chengdu',
      },
    ],
    key: 'value',
  },
})
const schema = reactive({
  props: {
    layout: 'horizontal',
    labelAlign: 'left',
  },
  fields: [
    {
      type: 'input',
      title: '姓名',
      field: 'name',
      value: '',
      props: {
        placeholder: '输入姓名',
      },
    },
    {
      type: 'select',
      title: '地址',
      field: 'address',
      value: '',
      props: {
        placeholder: '选择地址',
      },
    },
  ],
})
</script>

API

Props

Methods

Slots

Schema 字段描述

fields 字段描述

当前支持的组件