# 典型表单

包括各种表单项，比如输入框、选择器、开关等。（数据绑定，请看下方的案例）

代码

# 表单按钮

表单中可添加可操作得按钮，可以做进行提交表单动作操作等。（数据绑定，请看下方的案例）

# 按钮展示

放置按钮事件，可以进行操作数据

代码

# 按钮事件

给按钮绑定点击事件，进行操作表单功能

代码

# 表单验证

在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

# 必填验证

点击事件，通过refs的formValid进行验证是否都必填

代码

# 自定义验证

给每个组件进行绑定change事件,从而对数据进行验证

代码

注意

目前需要点击保存时，也需要进行验证数据，不会增加formValid里进行验证，formValid只验证必填，如果不进行再次验证， 在否则会造成提交成功问题。

# 数据绑定

# 下拉框

数据绑定/级联选择器数据绑定

代码

# 开关

switch 表示两种相互对立的状态间的切换，多用于触发「开/关」。

代码

# 复选框/单选框

一组备选项中进行多选/单选

代码

# 自定义单行文本

代码
排序 字段 类型 默认值 功能
1 singleTextItem Object {} { 注册字段名:{icon:"xxxx",action:"xxx"}},
icon图表 可以根据系统注册的icon图表来进行展示，action关联点击方法字段
排序 方法名 说明 参数
1 singleTextAction 按钮的点击事件 event返回字段属性

# 系统按钮

# table 表格

# 旧系统按钮(不支持跨页勾选)

代码

注意

目前停止维护,后续使用,请用新版本系统按钮

# 新系统按钮(支持跨页勾选)

注意

一，分外部搜索(下拉搜索)和 普通系统按钮(只能通过点击按钮后进行选择数据搜索)
注意: cptType控制 默认值:default为普通模式，filterable开启外部搜索
二，分表格和树形类型系统按钮，自定义只支持单独引用中使用。
注意: sysType控制树形还是表格 默认值:default为表格，tree为树形
旧系统按钮很多功能都有缺陷，后续使用请使用新系统按钮，

代码

外部搜索

代码

多选

代码

反转数据: 选取的数据，根据标识对应数据，从而再次打开，把存在的数据勾选上

代码

参数

排序 字段 类型 默认值 功能
table
1 field Array [] 绑定字段的系统按钮
例如：[ { "id": 2, "fname": "filed2", "lanIDVal": "数据2", "seqNo": 2 }, { "id": 3, "fname": "filed3", "lanIDVal": "数据3", "seqNo": 3 } ]
2 defaultMethods String "" 自定义方法名称,用于兼容之前老系统按钮方法，把sysBtnDefaultHandleChange 方法名进行替换
3 searchProps Array [] 搜索字段条件
例如：搜索名称['name','xxx']
4 reversal Boolean false 数据反转，根据标识关联数据，进行打开反向勾选数据
5 tableColumn Array [] 列配置
例如：tableColumn: [{ field: "id", title: "ID" },{ field: "fname", title: "字段名" },{ field: "lanIDVal", title: "字段显示名" },{ field: "seqNo", title: "排序" },]
6 isCheck Boolean false 是否为多选
7 reserve Boolean true 是否保留勾选状态
8 resizable Boolean false 列是否允许拖动列宽调整大小
9 pagerCount Number 7 显示页码按钮的数量
10 isMountedFun Boolean true 偶尔条件下判断是否继续初始化调用接口
11 tablePage Object --- 默认值：{total: 0,currentPage: 1,pageSize: 10}
分页配置
例如：tablePage: {total: 0,currentPage: 1,pageSize: 10,},
12 treeKey String 'id' 唯一标识
13 tableToolbar Object {} 工具栏配置
type
1 cptType String "text" 组件类型 区别为搜索 还是普通选择还是下拉外部搜索
filterable 和 text
2 size String 'mini' 组件大小
3 compatibilityMode String Array 组件数据格式 （字符串还是数组） 如果传入如String类型，则需要传fieldNameList回显得文字
4 clearable Boolean true 是否显示清除按钮
5 btnAttribute Array --- 默认值:[{icon: "el-icon-finished",btnWord: "确定",btnType: "primary",isFinished: true,}]必须是多选模式，
isFinished 存在会调用选取数据得功能，否则调用 btnClick方法来触发点击事件
6 methodsClickName String "" 按钮的自定义名称参数,关联事件handBtnClick
7 tagListSize String "" cptType为text下,tag的大小
8 tagListHeightLayers Number 3 cptType为text下,第几层下出现下拉框展示tag
9 tagEffect String --- tag（标签）主题
10 tagType String 'info' tag（标签）类型
11 tagListClick String/Boolean '' 点击X的清楚单个tags时候，的自定义事件
12 tagListDisplayField String 'val' tag（标签）的展示字段名/展示的字段名 可以理解为 key 和label中的label
13 fieldNameList String --- 在数据格式为String时，回显的字段名
14 dialogWidth String '50%' 弹框宽度
15 isCheck Boolean false 是否多选
16 sysTitle String '选择值' 弹框选择的左上角title标题
17 disabled Boolean false 是否为禁用
18 criteria Object/Array [] 高级搜索的 回显绑定的v-model
19 remoteMethod Function --- select 系统按钮 的外部检索输入搜索的值方法 在formbody里传递会造成丢失方法

API

排序 方法名 说明 参数
1 handBtnClick 点击打开弹窗按钮事件钩子 tagsList,event
2 clearClick 清楚全部tags的事件钩子 event
3 tagListOnClick tag上的点击事件钩子 item, index, tagsList
4 sysBtnDefaultHandleChange 调用系统按钮的事件，获取table值 page, callback, ...event,
callback为回调函数 每个模式下情况下，返回的值都不一样，可以看上方案例结合去理解 或者你打印...event 参数去查看全部的回调参数
5 btnClick 按钮的点击事件 item,...event 参数去查看全部的回调参数
6 dbRowClick 点击行选取数据的事件 tagsList,...event 参数去查看全部的回调参数

# tree 树形

旧树形就不进行展示

代码

多选

代码

下拉选

代码

# 懒加载（lazy: true 开启懒加载）

外部搜索

# 下拉模式

# 单选
代码

多选

代码

普通按钮

代码

参数

排序 字段 类型 默认值 功能
1 treeKey String 'id' 标识
2 treeData Array [] tree数据，非懒加载时展示的数据
3 lazy Boolean false 懒加载，不需要treeData需要回调函数中返回参数展示树形数据
4 fristNodeID Number 0 回调函数第一次返回值时,返回的标识id数
5 nodeNameKey String 'id' 标识id。快速调用接口时，回调参数返回的值
6 expandArray Array [] 默认展开的节点的 key 的数组
7 isCheck Boolean false 是否多选
8 defaultMethods String '' 自定义方法名称,用于兼容之前老系统按钮方法，把sysBtnTreeHandleChange 方法名进行替换
9 defaultProps( 配置表) Object --- 默认值:{children: 'children',label: 'label',isLeaf: 'hasChild'}
isLeaf:指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
children:指定子树为节点对象的某个属性值
label:指定节点标签为节点对象的某个属性值
10 contentIcon String '' 全局的icon图表
11 accordion Boolean false 是否每次只打开一个同级树节点展开
12 draggable Boolean false 是否开启拖拽节点功能

API

排序 方法名 说明 参数
1 handBtnClick 点击打开弹窗按钮事件钩子 tagsList,event
2 clearClick 清楚全部tags的事件钩子 event
3 tagListOnClick tag上的点击事件钩子 item, index, tagsList
4 sysBtnTreeHandleChange 调用系统按钮的事件，获取tree值 nodeId, callback, ...event
callback为回调函数 每个模式下情况下，返回的值都不一样，可以看上方案例结合去理解 或者你打印...event 参数去查看全部的回调参数
5 btnClick 按钮的点击事件 item,...event 参数去查看全部的回调参数
6 dbRowClick 点击行选取数据的事件 tagsList,...event 参数去查看全部的回调参数

# 文件上传

可修改文件名称的文件上传，如果为普通文件上传，看最下方的api文件

代码

参数

排序 字段 类型 默认值 功能
1 field Array [] 绑定字段的上传的文件列表,
例如：[ { "status": "ready", "name": "232820.jpg", "size": 41103, "percentage": 0, "uid": 1682384851813, "raw": { "uid": 1682384851813 } } ]
2 disabled Boolean false 是否为禁用
FileNameUpload 下面的参数需要放在这个对象下
例如：FileNameUpload:{uploadAction:xxx}
3 uploadAction String "" 必选参数
上传的地址：如果是/开头，则自动拼接本系统的api地址，否则以完全路径为上传这里自动拼接就不进行展示
4 uploadMultiple Boolean false 是否支持多选文件(不是限制上传文件个数)
5 uploadLimit Number -- 最大允许上传个数
6 uploadFileSize Boolean "" 限制上传文件大小，目前只限制MB
例如： uploadFileSize=5MB
7 uploadFileType Boolean [] 限制的文件类型

API
file 原生文件
fileList 上传的文件List
res 接口成功返回的参数
err 接口返回错误的参数
event 字段信息

排序 方法名 说明 参数
1 uploadBeforeUploadFile 上传文件之前的钩子 file, event
2 uploadFileRemove 文件列表移除文件时的钩子 file, fileList, event
3 uploadFilePreview 点击文件列表中已上传的文件时的钩子 file, event
4 uploadFileChange 文件状态改变时的钩子 file, fileList, event
5 uploadFileExceedFile 文件超出个数限制时的钩子 files, fileList , event
6 uploadFileSuccess 文件上传成功时的钩子 res, file, fileList, event
7 uploadFileError 文件上传失败时的钩子 err, file, fileList, event

# 组件API类型

# 组件类型

注意

之前开发模式type 为数字，由于组件逐渐变多，number也变得抽象起来。为了后续方便，type增加了简单规范

排序 组件类型 type类型[Number/String] 备注
1 输入框 1/input 推荐使用"input"
2 多行文本 2/textarea 推荐使用"textarea"
3 数字输入框 3/number 推荐使用"number"
4 下拉框 4/select 推荐使用"select"
5 级联选择器 5/cascader 推荐使用"cascader"
6 浏览按钮 6/browseButton 推荐使用"browseButton" 停止维护，请使用最新类型
7 日期 7/date 推荐使用"date"， 此日期时间类型以后不会再更
8 时间 8/time 推荐使用"time"， 此日期时间类型以后不会再更
9 日期时间 9/dateAndTime 推荐使用"dateAndTime"， 此日期时间类型以后不会再更
10 附件上传 10/fileUpload 推荐使用"fileUpload"
11 复选框 11/checkbox 推荐使用"checkbox"
12 单选框 12/radio 推荐使用"radio"
13 开关 13/switch 推荐使用"switch"
14 icon浏览按钮 14/iconBrowseButton 推荐使用"iconBrowseButton"
15 树形浏览按钮 15/treeBrowseButton 推荐使用"treeBrowseButton" 停止维护，请使用最新类型
16 密码框 16/password 推荐使用"password"
17 自定义单行文本 17/customInput 推荐使用"customInput"
18 文本列表 19/textList 推荐使用"textList"
19 颜色选择器 20/colorSelect 推荐使用"colorSelect"
20 日期选择器 21/dateSelect 推荐使用"dateSelect"，此日期时间类型包含年月日时间范围等类型 推荐使用
21 系统附件上传 22/sysFileUpload 推荐使用"sysFileUpload"
22 日期范围 23/dateRange 推荐使用``"dateRange",停止维护，请使用最新类型
23 系统按钮 24/sysButton 推荐使用"sysButton"(此浏览按钮类型包含普通浏览按钮及树形浏览按钮推荐使用 详情见系统按钮文档)
24 链接 25/link 推荐使用"link"
25 新附件上传 26/newFilesUpload 推荐使用"newFilesUpload"，此附件上传类型可以在表单中使用也可以在明细表中使用

# 组件参数

参数名称 参数说明 是否必填 数据类型 备注
title 字段显示值 是 String
field 字段存储值 是 String
type 字段类型 是 String/Number 可选项看字段类型说明 推荐使用字符串.
columns 表单分栏 是 Number 一行24栏 12则一行两列
readonly 字段是否只读 否 Boolean 默认false
disabled 字段是否禁用 否 Boolean 默认false
oninput 输入限制及转义 否 String/Number 只有字段类型为"input"才有效 详见下方说明
multiple 下拉框是否为多选,默认false 否 Boolean 只有字段类型为"select"才有效
showAllLevels 级联选择器是否显示全部节点 否 Boolean 只有字段类型为"cascader"才有效
filterable 级联选择器是否可以搜索 否 Boolean 只有字段类型为"cascader"才有效
treeLabelField 树形浏览按钮显示值 否 String 默认false
treeValueField 树形浏览按钮存储值 否 String 默认false
valueIsLeaf 树节点值否只返回叶子节点，默认只返回叶子节点 否 Boolean 只有字段类型为"treeBrowseButton"才有效
browsebuttonValLabel 浏览按钮显示值 否 String 只有字段类型为"browseButton"才有效
browsebuttonValValue 浏览按钮存储值 否 String 只有字段类型为"browseButton"才有效
isSingle 浏览按钮是否单选 默认单选 否 Boolean 只有字段类型为"browseButton"才有效
switchActive/switchInactive 开关类型活动值/休眠值 否 Boolean 只有字段类型为"switch"才有效 不设置则默认布尔值
remarks 字段提示文本 否 String
min 最小值 否 Number 只有字段类型为"number"才有效
max 最大值 否 Number 只有字段类型为"number"才有效
precision 0整数 1保留1位小数 2保留两位小数 否 Number 只有字段类型为"number"才有效
rules 数字类型字段自定义校验规则,符合的校验规则的数据 边框会变红 否 Object 只有字段类型为"number"才有效 ,见下方说明

# 组件上面参数

参数名称 参数说明 是否必填 数据类型 备注
checkboxStatus 设置复选框选中/未选中值 不选默认0，1 否 Object 只有字段类型为"checkbox"才有效 详情见下方说明
textLinkType 链接状态，常规、成功、危险等状态 例 textLinkType:"success" 否 String 只有字段类型为"link"才有效
underline 是否显示下划线 否 Boolean 只有字段类型为"link"才有效
icon 图标类名 例 icon:"el-icon-edit" 否 String 只有字段类型为"link"才有效
fileSize 上传文件大小限制，不传默认5MB 否 Number 只有字段类型为"newFilesUpload"才有效
fileType 上传文件类型限制，不传默认["png", "jpg", "jpeg"] 否 Array 只有字段类型为"newFilesUpload"才有效
listType 上传文件列表类型限制，不传默认text 否 String 只有字段类型为"newFilesUpload"才有效
isShowTip 是否显示提示，不传默认显示 否 Boolean 只有字段类型为"newFilesUpload"才有效
fileLimit 上传文件最大允许上传个数限制，不传默认99 否 Number 只有字段类型为"newFilesUpload"才有效
uploadUrl 上传文件接口地址，使用newFilesUpload文件上传时必填 否 String 只有字段类型为"newFilesUpload"才有效
dateType 日期类型，日期格式组件内部已转，不传默认为“year” 否 String 只有字段类型为"dateSelect"才有效 可选值见下方详情

oninput 示例

//oninput 示例
fileData:[
{ title: '禁止输入中文', field: 'text', type:"input", columns: 12, oninput:1 },
{ title: '金额', field: 'text', type:"input", columns: 12, oninput:2 },
{ title: '金额转大写', field: 'text', type:"input", columns: 12, oninput:3 }
]
// oninput可选项 1为禁止输入中文 2为金额千分位 3为金额转大写

rules 示例

//rules 示例
fileData:[
{ title: '数字', field: 'text', type:"number", columns: 12, rules:
{type:1,min:1,max:5} },
]
// rules:{
type //校验类型 1为最小值与最大值之间 2为最小值与最大值之外
min //最小值
max //最大值
}

checkboxStatus 示例

//checkboxStatus 示例
fileData:[
{ title: '测试', field: 'text', type:"checkbox", columns: 12, checkboxStatus:
{true:"选中",false:"未选中"} },
]
// checkboxStatus:{
true //选中值
false //未选中值
}

dateType 示例

//dateType 示例
fileData:[
{ title: '时间', field: 'time', type:"dateSelect", columns: 12,
dateType:"year" },
]
// dateType可选项
"year"/"month"/"week"/"date"/"time"/"timerange"/"datetime"/"dates"/"datetimerange"/"daterange"/"monthrange"
分别对应 年/月/周/日/时间/时间范围/日期时间/多个日期/日期时间范围/日期范围/月份范围

← 基本表单 →