Skip to content

lq9958/form-render4-vue3-pro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

98 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

form-render4-vue3-pro logo

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

参数名 类型 描述 是否必须
modelValue(v-model) Object 表单数据对象 Yes
schema Object 生成表单的 JSON 对象 Yes
optionData Object select、checkbox、radio、tree-select、cascader、transfer等组件选项的数据源 No

Methods

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

Slots

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

Schema 字段描述

字段名称 类型 Description 是否必须
fields Array 生成表单项的数组 Yes
rules Object 使用方式参考 arco-design from 表单 rules No
props - 使用方式参考 arco-design from 表单原生属性 No
column Number 生成表单项的列数 Yes
gutter Number 表单项之间的间隔 No

fields 字段描述

字段名称 类型 Description 是否必须
datasource DataSource 远程加载数据配置 Yes
type String 指定生成对应 arco-design 的组件,对应关系见下表 type Yes
gutter Number 用与表单项之间的间隔 ,该项不设置会自动取全局的 gutter No
title String 表单项的名称 Yes
field String 表单项绑定的字段 Yes
value any 该表表单项的值 No
props Object 生成最终组件的 props 项,对应 arco-design 组件的 props No
span Number 该表单项独占的栅格数(默认为 24) No
show Boolean 控制表单项显示与否,默认为:true No
config Object a-form-item组件配置对象,字段参考a-form-item组件属性 No
children Array 嵌套表单项 No
watcher Array 字段联动动作 No

当前支持的组件

type 对应的 arco-design 组件名
form-item 表单项,复杂表单布局可能会使用到
input a-input
input-number a-input-number
checkbox a-checkbox
radio a-radio
switch a-switch
slider a-slider
textarea a-textarea
rate a-rate
upload a-upload
time-picker a-time-picker
verification-code a-verification-code
tree-select a-tree-select
date-range-picker a-date-range-picker
date-picker a-date-picker
cascader a-cascader
transfer a-transfer
divider a-divider
alert a-alert
color a-color