“vue”: “^2.7.13”
“element-ui”: “^2.15.7”

代码地址

【说明】
该组件时使用vue3（vue2.7）语法封装，使用时可用vue2语法使用也可以使用vue3语法使用

一、vue2语法使用案例

基础用法

<template><div class="form-demo"><div class="form"><BasicForm:schemas="schemas":colProps="{span: 12}":showActionButtonGroup="false"@register="register"@change="handleChange"/></div><div class="btns"><el-button type="primary" @click="saveForm">保存</el-button><el-button @click="resetForm">重置</el-button></div></div>
</template><script>export default {name: 'BasicFormDemo',data() {return {schemas: [{prop: 'id',component: 'Input',show: false // 显示隐藏},{prop: 'username',component: 'Input',label: '姓名',labelWidth: '100px',defaultValue: '张三', // 默认值colProps: {span: 8},required: true},{prop: 'address',component: 'Input',label: '地址',labelWidth: '100px',defaultValue: 1, // 默认值componentProps: {maxlength: 10,showWordLimit: true},colProps: {span: 8}},{prop: 'rate',component: 'Input',label: '税率',labelWidth: '100px',componentProps: {append: '%'},colProps: {span: 8}},{prop: 'url',component: 'Input',label: '网址',labelWidth: '100px',componentProps: {prepend: 'http'},colProps: {span: 8}},{prop: 'inputNumber',component: 'InputNumber',label: '距离',labelWidth: '100px',defaultValue: 1 // 默认值},{prop: 'age',component: 'Switch',label: '年龄',labelWidth: '100px',defaultValue: true // 默认值},{prop: 'remark',component: 'Input',label: '评论',labelWidth: '100px',componentProps: {type: 'textarea',placeholder: '请输入评论'}},{prop: 'divider',component: 'Divider',labelWidth: '0px',componentProps: {contentPosition: 'left',content: '日期类型组件'}},{prop: 'time1',component: 'TimePicker',label: '时间选择器'},{prop: 'time2',component: 'TimePicker',label: '时间选择器',componentProps: {isRange: true,rangeSeparator: '至',startPlaceholder: '开始时间',endPlaceholder: '结束时间',placeholder: '选择时间范围'}},{prop: 'createDate',component: 'DatePicker',label: '创建日期',componentProps: {}},{prop: 'endDate',component: 'DatePicker',label: '带快捷选项',componentProps: {valueFormat: 'yyyy-MM-dd',pickerOptions: {disabledDate(time) {return time.getTime() > Date.now()},shortcuts: [{text: '今天',onClick(picker) {picker.$emit('pick', new Date())}},{text: '昨天',onClick(picker) {const date = new Date()date.setTime(date.getTime() - 3600 * 1000 * 24)picker.$emit('pick', date)}},{text: '一周前',onClick(picker) {const date = new Date()date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)picker.$emit('pick', date)}}]}}},{prop: 'weekly',component: 'DatePicker',label: '周',componentProps: {type: 'week',format: 'yyyy 第 WW 周',placeholder: '请选择周'}},{prop: 'dateRange',component: 'DatePicker',label: '日期范围',componentProps: {type: 'daterange',rangeSeparator: '至',startPlaceholder: '开始日期',endPlaceholder: '结束日期'}},{prop: 'dateRange1',component: 'DatePicker',label: '日期范围-带快捷选项',labelWidth: '140px',componentProps: {type: 'daterange',align: 'right',unlinkPanels: true,rangeSeparator: '至',startPlaceholder: '开始日期',endPlaceholder: '结束日期',pickerOptions: {shortcuts: [{text: '最近一周',onClick(picker) {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)picker.$emit('pick', [start, end])}},{text: '最近一个月',onClick(picker) {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)picker.$emit('pick', [start, end])}},{text: '最近三个月',onClick(picker) {const end = new Date()const start = new Date()start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)picker.$emit('pick', [start, end])}}]}}},{prop: 'monthRange',component: 'DatePicker',label: '月份范围',componentProps: {type: 'monthrange',rangeSeparator: '至',startPlaceholder: '开始月份',endPlaceholder: '结束月份'}},{prop: 'monthRange1',component: 'DatePicker',label: '月份范围-带选项',labelWidth: '130px',componentProps: {type: 'monthrange',align: 'right',unlinkPanels: true,rangeSeparator: '至',startPlaceholder: '开始月份',endPlaceholder: '结束月份',pickerOptions: {shortcuts: [{text: '本月',onClick(picker) {picker.$emit('pick', [new Date(), new Date()])}},{text: '今年至今',onClick(picker) {const end = new Date()const start = new Date(new Date().getFullYear(), 0)picker.$emit('pick', [start, end])}},{text: '最近六个月',onClick(picker) {const end = new Date()const start = new Date()start.setMonth(start.getMonth() - 6)picker.$emit('pick', [start, end])}}]}}},{prop: 'DateTimePicker',component: 'DatePicker',label: '日期时间选择器',labelWidth: '110px',componentProps: {type: 'datetime'}},{prop: 'divider',component: 'Divider',labelWidth: '0px',componentProps: {contentPosition: 'left',content: '单选框'}},{prop: 'radio',component: 'RadioGroup',label: '单选框',defaultValue: '2',colProps: { span: 12 },componentProps: {options: [{label: '1',value: '选项1'},{label: '2',value: '选项2'},{label: '3',value: '选项3',border: true},{label: '4',value: '选项4',disabled: true}]}},{prop: 'divider',component: 'Divider',labelWidth: '0px',componentProps: {contentPosition: 'left',content: '复选框'}},{prop: 'checkbox',component: 'CheckboxGroup',label: '复选框',defaultValue: ['2'],colProps: { span: 12 },componentProps: {options: [{label: '1',value: '选项1'},{label: '2',value: '选项2'},{label: '3',value: '选项3',border: true},{label: '4',value: '选项4',disabled: true}]}},{prop: 'selectAll',component: 'SelectAll',label: '全选',colProps: { span: 12 },defaultValue: ['2'],componentProps: {options: [{label: '1',value: '选项1'},{label: '2',value: '选项2'}]}},{prop: 'divider',component: 'Divider',labelWidth: '0px',componentProps: {contentPosition: 'left',content: '下拉框'}},{prop: 'select',component: 'Select',label: '下拉框',defaultValue: '2',componentProps: {options: [{label: '选项1',value: '1'},{label: '选项2',value: '2',disabled: true}]}},{prop: 'select1',component: 'Select',label: '多选',componentProps: {multiple: true,placeholder: '请选择',options: [{unitName: '选项1',id: '1'},{unitName: '选项2',id: '2',disabled: true}],fieldNames: {label: 'unitName',value: 'id'}}},{prop: 'select11',component: 'ApiSelect',label: '远程下拉框',componentProps: {api: () => this.getOpt(),resultField: 'result',fieldNames: {label: 'unitName',value: 'id'}}},{prop: 'ApiTreeSelect',component: 'ApiTreeSelect',label: '树下拉框',componentProps: {api: () => this.getTreeData(),resultField: 'result',fieldNames: {label: 'name'}}},{prop: 'divider1',component: 'Divider',labelWidth: '0px',componentProps: {contentPosition: 'left',content: '级联选择器'}},{prop: 'Cascader',component: 'Cascader',label: '基本用法',componentProps: {options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '设计原则',children: [{value: 'yizhi',label: '一致'},{value: 'fankui',label: '反馈'},{value: 'xiaolv',label: '效率'},{value: 'kekong',label: '可控'}]},{value: 'daohang',label: '导航',children: [{value: 'cexiangdaohang',label: '侧向导航'},{value: 'dingbudaohang',label: '顶部导航'}]}]},{value: 'zujian',label: '组件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'},{value: 'color',label: 'Color 色彩'},{value: 'typography',label: 'Typography 字体'},{value: 'icon',label: 'Icon 图标'},{value: 'button',label: 'Button 按钮'}]},{value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 单选框'},{value: 'checkbox',label: 'Checkbox 多选框'},{value: 'input',label: 'Input 输入框'},{value: 'input-number',label: 'InputNumber 计数器'},{value: 'select',label: 'Select 选择器'},{value: 'cascader',label: 'Cascader 级联选择器'},{value: 'switch',label: 'Switch 开关'},{value: 'slider',label: 'Slider 滑块'},{value: 'time-picker',label: 'TimePicker 时间选择器'},{value: 'date-picker',label: 'DatePicker 日期选择器'},{value: 'datetime-picker',label: 'DateTimePicker 日期时间选择器'},{value: 'upload',label: 'Upload 上传'},{value: 'rate',label: 'Rate 评分'},{value: 'form',label: 'Form 表单'}]},{value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'},{value: 'tag',label: 'Tag 标签'},{value: 'progress',label: 'Progress 进度条'},{value: 'tree',label: 'Tree 树形控件'},{value: 'pagination',label: 'Pagination 分页'},{value: 'badge',label: 'Badge 标记'}]},{value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'},{value: 'loading',label: 'Loading 加载'},{value: 'message',label: 'Message 消息提示'},{value: 'message-box',label: 'MessageBox 弹框'},{value: 'notification',label: 'Notification 通知'}]},{value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 导航菜单'},{value: 'tabs',label: 'Tabs 标签页'},{value: 'breadcrumb',label: 'Breadcrumb 面包屑'},{value: 'dropdown',label: 'Dropdown 下拉菜单'},{value: 'steps',label: 'Steps 步骤条'}]},{value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 对话框'},{value: 'tooltip',label: 'Tooltip 文字提示'},{value: 'popover',label: 'Popover 弹出框'},{value: 'card',label: 'Card 卡片'},{value: 'carousel',label: 'Carousel 走马灯'},{value: 'collapse',label: 'Collapse 折叠面板'}]}]},{value: 'ziyuan',label: '资源',children: [{value: 'axure',label: 'Axure Components'},{value: 'sketch',label: 'Sketch Templates'},{value: 'jiaohu',label: '组件交互文档'}]}]}},{prop: 'Cascader2',component: 'Cascader',label: '多选',componentProps: {props: { multiple: true },options: [{value: 'zhinan',label: '指南',children: [{value: 'shejiyuanze',label: '设计原则',children: [{value: 'yizhi',label: '一致'},{value: 'fankui',label: '反馈'},{value: 'xiaolv',label: '效率'},{value: 'kekong',label: '可控'}]},{value: 'daohang',label: '导航',children: [{value: 'cexiangdaohang',label: '侧向导航'},{value: 'dingbudaohang',label: '顶部导航'}]}]},{value: 'zujian',label: '组件',children: [{value: 'basic',label: 'Basic',children: [{value: 'layout',label: 'Layout 布局'},{value: 'color',label: 'Color 色彩'},{value: 'typography',label: 'Typography 字体'},{value: 'icon',label: 'Icon 图标'},{value: 'button',label: 'Button 按钮'}]},{value: 'form',label: 'Form',children: [{value: 'radio',label: 'Radio 单选框'},{value: 'checkbox',label: 'Checkbox 多选框'},{value: 'input',label: 'Input 输入框'},{value: 'input-number',label: 'InputNumber 计数器'},{value: 'select',label: 'Select 选择器'},{value: 'cascader',label: 'Cascader 级联选择器'},{value: 'switch',label: 'Switch 开关'},{value: 'slider',label: 'Slider 滑块'},{value: 'time-picker',label: 'TimePicker 时间选择器'},{value: 'date-picker',label: 'DatePicker 日期选择器'},{value: 'datetime-picker',label: 'DateTimePicker 日期时间选择器'},{value: 'upload',label: 'Upload 上传'},{value: 'rate',label: 'Rate 评分'},{value: 'form',label: 'Form 表单'}]},{value: 'data',label: 'Data',children: [{value: 'table',label: 'Table 表格'},{value: 'tag',label: 'Tag 标签'},{value: 'progress',label: 'Progress 进度条'},{value: 'tree',label: 'Tree 树形控件'},{value: 'pagination',label: 'Pagination 分页'},{value: 'badge',label: 'Badge 标记'}]},{value: 'notice',label: 'Notice',children: [{value: 'alert',label: 'Alert 警告'},{value: 'loading',label: 'Loading 加载'},{value: 'message',label: 'Message 消息提示'},{value: 'message-box',label: 'MessageBox 弹框'},{value: 'notification',label: 'Notification 通知'}]},{value: 'navigation',label: 'Navigation',children: [{value: 'menu',label: 'NavMenu 导航菜单'},{value: 'tabs',label: 'Tabs 标签页'},{value: 'breadcrumb',label: 'Breadcrumb 面包屑'},{value: 'dropdown',label: 'Dropdown 下拉菜单'},{value: 'steps',label: 'Steps 步骤条'}]},{value: 'others',label: 'Others',children: [{value: 'dialog',label: 'Dialog 对话框'},{value: 'tooltip',label: 'Tooltip 文字提示'},{value: 'popover',label: 'Popover 弹出框'},{value: 'card',label: 'Card 卡片'},{value: 'carousel',label: 'Carousel 走马灯'},{value: 'collapse',label: 'Collapse 折叠面板'}]}]},{value: 'ziyuan',label: '资源',children: [{value: 'axure',label: 'Axure Components'},{value: 'sketch',label: 'Sketch Templates'},{value: 'jiaohu',label: '组件交互文档'}]}]}},{prop: 'field3',component: 'Cascader',label: '可搜索',componentProps: {filterable: true,props: { label: 'unitName', value: 'id' },options: [{unitName: '神印王座',id: 1,children: [{unitName: '龙皓晨',id: 11},{unitName: '圣彩儿',id: 12}]},{unitName: '吞噬星空',id: 2},{unitName: '天行九歌',id: 3}]}},{prop: 'field3',component: 'ApiCascader',label: 'ApiCascader',componentProps: {filterable: true,props: { label: 'unitName', value: 'id' },api: () => this.getCascaderOpt()}},{prop: 'field4',component: 'Divider',labelWidth: '0px',componentProps: {contentPosition: 'left',content: '上传'}},{prop: 'field4',component: 'Upload',label: '上传附件',componentProps: {action: 'https://httpbin.org/post'}}],formAction: {}}},methods: {register(e) {this.formAction = econsole.log('e', e)},handleChange(e) {console.log('handleChange', e)},saveForm() {this.formAction.validate()console.log('t', this.formAction.getFieldValues())},resetForm() {this.formAction.clearValidate()},getOpt() {return new Promise(resolve => {const result = {result: [{id: '选项1',unitName: '黄金糕'},{id: '选项2',unitName: '双皮奶'},{id: '选项3',unitName: '蚵仔煎'},{id: '选项4',unitName: '龙须面'},{id: '选项5',unitName: '北京烤鸭'},{id: '选项6',unitName: '冰激淋'},{id: '7',unitName: '榴莲千层'},{id: '8',unitName: '煎饼'},{id: '9',unitName: '手抓饼'}]}resolve(result)})},getTreeData() {return Promise.resolve([{id: 118808,parentId: null,name: '新疆',children: [{id: 118809,parentId: 118808,name: '巴州乐禾',children: [{id: 118817,parentId: 118809,name: '采购部'},{id: 118818,parentId: 118809,name: '销售部'},{id: 118824,parentId: 118809,name: '运营部'},{id: 111824,parentId: 113809,name: '研发部'},{id: 118814,parentId: 118829,name: '市场部'}]}]},{id: 118809,parentId: null,name: '广东',children: [{id: 118879,parentId: 118801,name: '广州'}]}])},getCascaderOpt() {return Promise.resolve([{unitName: '神印王座',id: 1,children: [{unitName: '龙皓晨',id: 11},{unitName: '圣彩儿',id: 12}]},{unitName: '吞噬星空',id: 2},{unitName: '天行九歌',id: 3}])}}}
</script>
<style lang="scss">.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
</style>

可折叠表单

<template><div class="form-demo"><div class="form"><BasicForm:schemas="schemas":colProps="{span: 12}"@register="register"@change="handleChange"/></div></div>
</template><script>export default {name: 'BasicFormDemo',data() {return {schemas: [{prop: 'username',component: 'Input',label: '姓名'},{prop: 'address',component: 'Input',label: '地址'},{prop: 'rate',component: 'Input',label: '税率',componentProps: {append: '%'}}],formAction: {}}},methods: {register(e) {this.formAction = econsole.log('formAction', e)},handleChange(e) {console.log('handleChange', e)}}}
</script>
<style lang="scss">.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
</style>

设置表单表项值

<template><div class="form-demo"><div class="form"><BasicForm:schemas="schemas":colProps="{span: 12}":showActionButtonGroup="false"@register="register"@change="handleChange"/></div><div class="btns"><el-button type="primary" @click="setFormData">设置值</el-button><el-button type="primary" @click="updateSchema">更新表单项配置项</el-button><el-button type="primary" @click="insetSchema">插入表单项</el-button><el-button type="primary" @click="removeSchemaByFiled">删除表单项</el-button><el-button type="primary" @click="resetSchemas">重置表单</el-button></div></div>
</template><script>export default {name: 'BasicFormDemo',data() {return {schemas: [{prop: 'username',component: 'Input',label: '姓名'},{prop: 'address',component: 'Input',label: '地址'},{prop: 'rate',component: 'Input',label: '税率',componentProps: {append: '%'}}],formAction: {}}},methods: {register(e) {this.formAction = econsole.log('formAction', e)},handleChange(e) {console.log('handleChange', e)},setFormData() {// 调用 setFieldValues 方法可设置表单项值, 返回值是更新之后表单的值const data = this.formAction.setFieldValues({ username: '李四' })console.log('data', data)},updateSchema() {this.formAction.updateSchema({prop: 'rate',component: 'Input',label: '税率',componentProps: {placeholder: '请输入税率'}})},insetSchema() {this.formAction.insetSchema('rate', {prop: 'rate1',component: 'Input',label: '新增',componentProps: {placeholder: '请输入'}})},removeSchemaByFiled() {this.formAction.removeSchemaByFiled('address')},resetSchemas() {this.formAction.resetSchemas()}}}
</script>
<style lang="scss">.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
</style>

使用插槽 slots

<template><div class="form-demo"><div class="form"><BasicForm :schemas="schemas" :colProps="{span: 24}"><template #username><span>username slot</span></template><template #submitBefore>submit 左侧插槽</template></BasicForm></div></div>
</template><script>export default {name: 'BasicFormDemo',data() {return {schemas: [{prop: 'username',component: 'Input',label: '姓名',slots: 'username'},{prop: 'address',component: 'Input',label: '地址'},{prop: 'rate',component: 'Input',label: '税率',componentProps: {append: '%'}}]}}}
</script>
<style lang="scss">.form-demo {display: flex;flex-direction: column;height: 100%;overflow: hidden;background-color: white;.form {flex: 1;overflow: hidden;}.btns {display: flex;align-items: center;justify-content: flex-end;padding: 16px;box-shadow: 0 -1px #ddd;}}
</style>

二、vue3语法使用

<template><BasicForm@register="register"@submit="handleSubmit"@reset="handleSubmit"@change="handleChange"/>
</template><script setup>
const [register, { updateSchema, getFieldValues, setFieldValues }] = useForm({schemas: [{prop: 'orgUnitId',component: 'ApiSelect',label: 'label1',componentProps: {api: $api.getOrgUnitByUserId,fieldNames: { label: 'departmentName', value: 'id' },resultField: 'result'},required: true},{prop: 'projectId',component: 'Select',label: 'label2',required: true},],labelWidth: '110px'
})
</script>

Form Attributes

参数	说明	类型	可选值	默认值
colon	label 是否显示冒号	boolean	—	显示
schemas	必填，表单配置项，具体 看下表	array	—	—
colProps	表单项栅格布局，具体看下表	objeact	—	—
labelWidth	label 宽度	string	—	‘100px’
labelPosition	表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width	string	—	right
showActionButtonGroup	是否显示操作按钮	boolean	—	true
showSearchBtn	是否显示查询按钮	boolean	—	true
showResetBtn	是否显示清空按钮	Boolean	—	true
searchText	查询按钮文本	string	—	‘查询’
resetText	清空按钮文本	string	—	清空
isFlex	是否开启自适应布局	boolean	—	true
formSize	尺寸，不同的lebel设置不同的尺寸以适应屏幕, 设置此属性必须设置isFlex为true	boolean	—	true
model	表单数据对象	object	—	—
isEnterSearch	是否按下回车查询	boolean	—	true
formItemMb	表单项的 margin-bottom	String	—	‘16px’

Schemas Attributes

参数	说明	类型	可选值	默认值
colon	label 是否显示冒号	boolean	——	true
prop	必填，字段名称, 唯一	string	——	——
component	必填，输入框类型,	string	Input、InputNumber 、TimePicker、DatePicker、Switch、RadioGroup、CheckboxGroup、SelectAll、Select、ApiSelect、ApiTreeSelect、Cascader、ApiCascader、Upload、Divider	——
label	标签文本	string	——	——
label-width	表单域标签的的宽度	string	——	’100px‘
required	是否必填	boolean	——	false
show	表单项显示隐藏	boolean	——	false
componentProps	可设置组件属性（element 组件的属性，具体可查看 element 组件文档），如禁用输入框componentProps={disabled: true}	object	——	{}
defaultValue	输入框默认值	any	——	——
colProps	表单项栅格布局，具体看下表	object	——	——
rules	表单验证规则	array	——	——
disabled	是否禁用, 如此处设置表单禁用，无需在 componentProps 中设置	false	——	——
slots	表单项插槽	string	——	——
renderContent	渲染内容, 需要返回渲染函数，否则会报错	Function	——	——
formItemMb	表单项的 margin-bottom	String	——	‘16px’

colProps Attributes

参数	说明	类型	可选值	默认值
span	栅格占据的列数	number	——	8
xs	<768px 响应式栅格数或者栅格属性对象	number	——	——
sm	≥768px 响应式栅格数或者栅格属性对象	number	——	——
md	≥992px 响应式栅格数或者栅格属性对象	number	——	——
lg	≥1200px 响应式栅格数或者栅格属性对象	number	——	——
xl	≥1920px 响应式栅格数或者栅格属性对象	number	——	——

Events

事件名称	说明	回调参数
change	值改变时触发，InputNumber 类型输入如果设置默认值, 初始时会触发一次 change 事件	e: any
register	注册 BasicForm 组件实例, 获取实例上的方法	e: object

Slots

name	说明
submitBefore	submit btn 左侧插槽
resetBefore	reset btn 左侧插槽
resetAfter	reset btn 右侧插槽
moreAfter	更多 右侧插槽

Methods

⚠️ 该组件二次封装后需注册 register事件, 获取实例方法, 并且需要保存到当前组件实例中

方法名	说明	参数
validate	校验	—
clearValidate	清空表单校验	—
reset	清空表单校验, 清空输入框值	—
getFieldValues	获取表单的值	—
setFieldValues	设置表单的值, 返回值是更新之后表单的值	object
updateSchema	更新表单配置项, prop 必须存在 schemas 中, 不存在则更新失败	—
insetSchema	插入表单项	field, schema
removeSchemaByFiled	删除表单项	field
resetSchemas	重置配置项, 恢复初始值	—