一个通过 vue3+ naive-ui 实现的 配置化生成表单的方案,供参考学习。
一个通过配置生成表单的方案。基于 vue3
+ naive-ui
。
本仓库代码仅作为 参考。 并未进行过大量的测试,如果你有配置化生成表单的 功能需求,或者想了解如何实现 配置化生成表单,可以通过 本仓库 了解实现技术方案。
字段为 数组/对象:
对字段分组展示:
import { defineComponent, ref } from 'vue'
import Formative from 'formative'
import 'formative/style.css'
export default defineComponent({
name: 'App',
setup: () => {
const formConfig = {
labelAlign: 'right',
labelPlacement: 'left',
schema: [
{
field: 'text',
type: 'text',
label: '文本',
},
{
field: 'switch',
type: 'switch',
label: '开关',
},
{
field: 'radio',
type: 'radio',
label: '单选',
button: true,
options: ['Mark', 'John'],
},
],
}
const formData = ref({
text: '',
switch: false,
radio: 'John'
})
return () => <Formative config={formConfig} v-model={formData.value}></Formative>
}
})
支持 字段 对象/数组 支持 对 字段进行 分组
interface FormativeConfig {
// 是否为行内表单
inline?: boolean
// 标签的宽度
labelWidth?: number | string | 'auto'
// 标签对齐方式
labelAlign?: 'left' | 'right'
// 标签位置
labelPlacement?: 'top' | 'left'
// 是否显示标签
showLabel?: boolean
// 是否展示必填星号
showRequireMark?: boolean
// 是否展示校验反馈
showFeedback?: boolean
size?: 'small' | 'medium' | 'large'
// 默认验证信息
validateMessage?: string
// 表单字段配置
schema: FormativeSchema
}
type FormativeSchema = (FieldItem | GroupField)[]
type FieldItem =
| TextField // 文本输入字段
| TextViewField // 文本展示字段
| RadioField // 单选字段
| CheckboxField // 多选字段
| SwitchField // 开关字段
| SelectField // 选择器字段
| NumberField // 数字字段
| ObjectField // 对象字段
| ArrayField // 数组字段
interface BasicField {
// 字段类型
type: FieldType
// 字段
field: string
// 标签
label: string
// 描述信息
description?: string
// 校验规则
rule?: FormItemRule | FormItemRule[]
// 控制是否显示当前 field
showField?: boolean | ((fields: Record<string, any>) => boolean)
}
更多配置信息,查看 types.ts
通过 git clone
拉取本项目到本地后,安装依赖,然后启动项目,建议使用 yarn|pnpm
# yarn
yarn dev
# pnpm
pnpm dev
本项目供学习交流,你可以 clone 本仓库代码,做学习使用、个人项目使用、商业项目使用。