表单参数

介绍

安装

快速开始

架构

开发助手

代码生成

代码格式

参数配置

表单参数

表格参数

表格插槽

表格更多操作

表格按钮

表格搜索

表格操作

组件设置

自定义组件

被动回调

主动调用

常用函数

登录验证

辅助函数

文件处理

短信发送

邮件发送

表单参数

OneKeyAdmin后台管理系统中，开发助手自动生成的<el-curd>组件form表单详细参数如下：

参数	说明	例子
el-radio-group	单选框	`form: { is: 'el-radio-group', child: { value: [{label: '置顶', value: 0},{label: '推荐', value: 1},{label: '热门', value: 2}], }, default: 1, }`
el-checkbox-group	多选框	`form: { is: 'el-checkbox-group', child: { value: [{label: '置顶', value: 0},{label: '推荐', value: 1},{label: '热门', value: 2}] }, default: [1,2], }`
el-input	输入框	`form: { is: 'el-input', type: '', // textarea文本域、number数字 rules: [ {required: true,message: '不能为空'}, {pattern: /^[A-Za-z0-9-\" "]+$/ig,message: '只能输入字母、数字、空格、破折号-'}, ], }`
el-input-number	计数器	`form: { is: 'el-input-number', max: 100, min: 1 }`
el-select	选择框	`form: { is: 'el-select', child: { value:[ {title:'不显示',key:0}, {title:'都显示',key:1}, {title:'头部显示',key:2}, ], props:{label: 'title', value: 'key'} // 指定字段值与标题 }, // multiple: true, // 允许多选 // filterable: true, // 允许搜索 // remote: ‘xxx/xxx/xxx’, // 允许远程搜索（根据API接口和输入关键词，获取新的child.value） // value: 'this' // 调用表格数据 }`
el-cascader	级联选择器（多级联动）	`form: { is: 'el-cascader', options: [{ id: 'zhinan', title: '指南', child: [{ id: 'shejiyuanze', title: '设计原则', child: [{ id: 'yizhi', title: '一致' }] }] }], props:{label: 'title', value: 'id', children: 'child' } }`
el-switch	开关	`form: { is: 'el-switch' // activeValue: 1, // inactiveValue: 0, // activeText: '打开', // inactiveText: '关闭', }`
el-slider	滑块	`form: { is: 'el-slider' }`
el-date-picker	日期时间选择器	`form: { is: 'el-date-picker', type: 'date', // date日期，datetime日期时间，daterange日期范围，datetimerange日期时间范围 format: 'yyyy-MM-dd HH:mm:ss', // 显示在输入框中的格式 valueFormat: 'yyyy-MM-dd HH:mm:ss', // 可选，绑定值的格式 }`
el-time-select	时间选择器	`form: { is: 'el-time-select', type: '' // is-range时间范围 }`
el-rate	评分	`form: { is: 'el-rate' }`
el-color-picker	颜色选择器	`form: { is: 'el-color-picker' }`
el-file-upload	文件上传	`form: { is: 'el-file-select', type: '.png,.jpeg,.jpg', // .png,.jpeg,.jpg,.mp3,.mp4,.pdf等等文件后缀限制 limit: 1, // 文件上传数量限制 multiple: true, // 文件多选上传 }`
el-file-select	文件选择	`form: { is: 'el-file-select', type: 'image', //all, image,video,audio,word,other }`
el-file-list-select	多文件选择	`form: { is: 'el-file-list-select', type: 'image', //all, image,video,audio,word,other default: [] }`
el-link-select	链接选择	`form: { is: 'el-link-select', default: [] }`
el-editor	编辑器	`form: { is: 'el-editor' }`
el-parameter	自定义参数	`form: { is: 'el-parameter' }`
el-field	自定义字段	`form: { is: 'el-field', ifset: 'false', // 是否能设置 search: 'false', // 是否能搜索 }`

所有参数

参数	说明	类型	默认值
is	el-radio-group 单选框 el-checkbox-group 多选框 el-input 输入框 el-input-number 计数器 el-file-select 选择框 el-cascader 级联选择器（多级联动） el-switch 开关 el-slider 滑块 el-date-picker 日期时间选择器 el-time-select 时间选择器 el-rate 评分 el-color-picker 颜色选择器 el-file-select 文件选择 el-file-list-select 多文件选择 el-link-select 链接选择 el-editor 编辑器 el-parameter 自定义参数 el-field 自定义字段可自行定义更多组件调用.......	string	el-input
rules	表单验证自定义	array	[ {required: true,message: '不能为空'}, {saveRequired: true,message: '新增时不能为空'}, {updateRequired: true,message: '修改时不能为空'}, {pattern: /^[^\u4e00-\u9fa5]+$/, message: '不能包含中文字符'} ]
disabled	表单禁用	bool	false
update	更新时表单隐藏	bool	true
save	新增时表单隐藏	bool	true
placeholder	表单提示	string	—
default	默认值	string / bool / object / array	—
labelPosition	标题位置	right/left/top	left
labelWidth	标题宽度	string	100px
relation	关联显示,比如当某字段的值为0时才显示此字段	array	[{prop: '字段名', value: 0}]
tips	表单提示，在表单下方	html/string	—
style	表单样式	object	{}
editorcss	编辑器样式	object	{}
colMd	表单在电脑屏幕下占用宽度	int	继承
colSm	表单在手机屏幕下占用宽度	int	继承

文档最后更新时间：2023-03-16 10:06:03