microbee-http 丨 软件开发框架
microbee-http 丨 软件开发框架 > 快速开始 > MICROBEE-FRONT > 框架工具组件 > 表单组formSet

表单组formSet

1.使用说明

1.1 初始化

const formsetsIns = McrbHttpClient.formSets(containerId, options)

formsetsIns.render()

1.2 获取表单组的所有值

formsetsIns.getValues()

getValues方法返回值结构如下：


                {
                    code: number, // 200: 成功； 400: 必填项不能为空； 500： 类型错误。
                    data: array,
                    msg: string // 对应的验证信息
                }
            

1.3 设置表单组的值

formsetsIns.setValues(data)

参数说明：

配置组options：每一行表单组的所有表单元素配置项数组。目前支持最少1个配置项option，最多4个。配置项类型如下：

input类型

type(string)input(必填)
name(string)表单项name属性(必填)
label(string)表单元素label(必填)
placeholder(string)input框placeholder属性(选填)

select类型

type(String)select(必填)
name(String)表单项name属性(必填)
label(String)表单元素label(必填)
placeholder(String)下拉框未选择时，显示的提示(选填)
opts(Array)下拉框选项对应的数据信息(必填)

opts参数

text(String)选项显示的文字(必填)
value(String|Number)选项的值(必填)
selected(Boolean)改选项是否被选中(选填)

2.使用示例


            <div id="testFormsets"></div>
            <script>
                const options = [
                    {
                        type: 'input',
                        name: 'uname',
                        label: '用户名'
                    }, {
                        type: 'input',
                        name: 'age',
                        label: '年龄',
                    }, {
                        type: 'select',
                        name: 'job',
                        label: '职业',
                        opts: [
                            {value: '', text: '请选择', selected: true},
                            {value: 1, text: '教师'},
                            {value: 2, text: '工程师'},
                            {value: 3, text: '医生'},
                        ]
                    }
                ]
                const testFormsets = McrbHttpClient.formSets('testFormsets', options)
                testFormsets.render()
            </script>

3.效果展示

 



 
本文档来自—microbee-http 丨 软件开发框架平台