“vue”: “^2.7.13”
代码地址
【说明】
< template> < divclass = " form-demo" > < divclass = " form" > < BasicForm:schemas = " schemas" :colProps = " {span: 12}" :showActionButtonGroup = " false" @register = " register" @change = " handleChange" /> </ div> < divclass = " btns" > < el-buttontype = " 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> < stylelang = " 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> < divclass = " form-demo" > < divclass = " 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> < stylelang = " 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> < divclass = " form-demo" > < divclass = " form" > < BasicForm:schemas = " schemas" :colProps = " {span: 12}" :showActionButtonGroup = " false" @register = " register" @change = " handleChange" /> </ div> < divclass = " btns" > < el-buttontype = " primary" @click = " setFormData" > </ el-button> < el-buttontype = " primary" @click = " updateSchema" > </ el-button> < el-buttontype = " primary" @click = " insetSchema" > </ el-button> < el-buttontype = " primary" @click = " removeSchemaByFiled" > </ el-button> < el-buttontype = " 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 ( ) { 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> < stylelang = " 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> < divclass = " form-demo" > < divclass = " form" > < BasicForm:schemas = " schemas" :colProps = " {span: 24}" > < template#username > < span> </ span> </ template> < template#submitBefore > </ 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> < stylelang = " 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><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>
参数 说明 类型 可选值 默认值 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’
参数 说明 类型 可选值 默认值 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’
参数 说明 类型 可选值 默认值 span 栅格占据的列数 number —— 8 xs <768px 响应式栅格数或者栅格属性对象number —— —— sm ≥768px 响应式栅格数或者栅格属性对象number —— —— md ≥992px 响应式栅格数或者栅格属性对象number —— —— lg ≥1200px 响应式栅格数或者栅格属性对象number —— —— xl ≥1920px 响应式栅格数或者栅格属性对象number —— ——
事件名称 说明 回调参数 change 值改变时触发，InputNumber 类型输入如果设置默认值, 初始时会触发一次 change 事件 e: any register 注册 BasicForm 组件实例, 获取实例上的方法 e: object
name 说明 submitBefore submit btn 左侧插槽 resetBefore reset btn 左侧插槽 resetAfter reset btn 右侧插槽 moreAfter 更多 右侧插槽
⚠️ 该组件二次封装后需注册 register事件, 获取实例方法, 并且需要保存到当前组件实例中
方法名 说明 参数 validate 校验 — clearValidate 清空表单校验 — reset 清空表单校验, 清空输入框值 — getFieldValues 获取表单的值 — setFieldValues 设置表单的值, 返回值是更新之后表单的值 object updateSchema 更新表单配置项, prop 必须存在 schemas 中, 不存在则更新失败 — insetSchema 插入表单项 field, schema removeSchemaByFiled 删除表单项 field resetSchemas 重置配置项, 恢复初始值 —
![[科研图像处理]用matlab平替image-j，有点麻烦，但很灵活！](http://pic.xiahunao.cn/[科研图像处理]用matlab平替image-j，有点麻烦，但很灵活！)
)
