简介

mb-form是常规表单模板，可以使用所有自带“表单组件”以及自定义表单组件

使用示例

<mb-form ref="magicForm" @reload="magicList.reload" v-bind="formOptions" />

const formOptions = reactive({
    detail: {
        request: {
            url: '/system/user/get'
        }
    },
    form: {
        request: {
            url: "user/save"
        },
        rows: [{
            gutter: 24,
            cols: [{
                span: 12,
                name: 'head',
                component: 'upload-image',
                label: '头像',
                rules: [{ required: true, message: '请选择头像', trigger: 'change' }]
            },{
                span: 12,
                name: 'username',
                label: '登录名称',
                rules: [{ required: true, message: '请输入登录名称', trigger: 'change' }]
            }, {
                span: 12,
                name: 'password',
                label: '密码'
            }]
        },{
            gutter: 24,
            cols: [{
                span: 12,
                name: 'name',
                label: '姓名/昵称'
            }, {
                span: 12,
                name: 'phone',
                label: '手机号'
            }]
        },{
            gutter: 24,
            cols: [{
                component: 'treeselect',
                span: 12,
                name: 'officeId',
                label: '组织机构',
                rules: [{ required: true, message: '请选择组织机构', trigger: 'change' }],
                props: {
                    url: '/system/user/offices'
                }
            }, {
                component: 'select',
                span: 12,
                name: 'roles',
                label: '选择角色',
                rules: [{ required: true, message: '请选择角色', trigger: 'change' }],
                props: {
                    url: '/system/role/all',
                    placeholder: '请选择角色',
                    multiple: true
                }
            }]
        }, {
            gutter: 24,
            cols: [{
                span: 24,
                component: 'radio-group',
                name: 'isLogin',
                label: '登录状态',
                defaultValue: '0',
                props: {
                    button: true,
                    options: [{
                        label: '有效',
                        value: '0'
                    }, {
                        label: '锁定',
                        value: '1'
                    }]
                }
            }]
        }]
    }
})

form 属性

属性	说明	类型	可选值	默认值	示例/备注
form	表单配置	Object	—	—	具体属性见下表
属性 说明 类型 可选值 默认值 示例/备注 request 保存功能请求配置 Object — — 具体属性见下表 属性 说明 类型 可选值 默认值 示例/备注 url 接口相对地址，post请求 String — — — rows 行配置 Array — — 具体属性见下表 属性 说明 类型 可选值 默认值 示例/备注 gutter el-row的gutter属性 Number — — — cols 列配置 Array — — 具体属性见下表 属性 说明 类型 可选值 默认值 示例/备注 span el-col的span属性 Number — — — name key值 String — — name: 'username' component 组件名称，默认添加“mb-”前缀，也可以用“el-xxx”组件或者自定义组件 — — component: 'upload-image' label 标签文本 String — — — rules 验证规则参考 Array — — — defaultValue 字段默认值 String — — — props 组件绑定属性v-bind="props" Object — — —
detail	表单详情	Object	—	—	具体属性见下表
属性 说明 类型 可选值 默认值 示例/备注 request 表单详情请求配置 Object — — 具体属性见下表 属性 说明 类型 可选值 默认值 示例/备注 url 接口相对地址，get请求 String — — — formData 直接设置详情数据 Object — — — handlerFormData 处理详情数据，参数：(formData) Function — — handlerFormData: (formData) => { return formData }