jsmom-table-form v1.1.81
表格表单组件
安装
npm i jsmom-table-form -S
or
yarn add jsmom-table-form
使用
- 引入
import TableForm from "jsmom-table-form";
- 注册
components: { TableForm, }
- 页面
<TableForm></TableForm>
配置
fieldData
Array<Object>
字段配置- name
string
字段名 - text
string
展示文本 - formType
String
类型 select|cascader|selectData|textarea|datetime|date|calendar|images|file|number|switch|content|text|html - enumName
string
枚举名 - formRules
Array<Object>
表单验证规则 - formSpan
Number
表单占栅格数 最大 24 - inputStyle
String
表单输入项 style - selectMultiple
Boolean
多选 - clearable
Boolean
可被清理 - optionLoading
Boolean|Function
选择列表加载中 - isLazy
Boolean
懒加载(级联选择) - lazyLoadFunction
Function
懒加载函数(级联选择) - showAllLevels
Function
显示所有级(级联选择) - isCheckStrictly
Boolean
父子不关联(级联选择) - isCollapseTags
Boolean
折叠选项 - selectOption
Array<Object>|Function
选择项 - allowCreate
Boolean
手动创建选择项 - filterable
Boolean
是否可搜索 手动创建开启时必须为 true - defaultFirstOption
Boolean
回车时选择第一个 - dateType
String
日期类型 year|month|date|dates| week|datetime|datetimerange|daterange|monthrange - selectTable
String
选择表 - selectParams
Object|Function
选择额外的参数(selectData) - formEventMaps
Object<Function>
表单多动态事件 - selectBind
Object<Function>
关联其他字段(selectData) - sortable
Boolean
启用排序 - disabled
Boolean|Function
禁用表单 - isExpandTableId
Boolean
是展开表格数据 id 出现一次即可 - valueFormat
String
格式化时间值 - textareaRowNum
Number
文本域显示行数 - limit
Number
限制文件图片数量 - showStepControls
Boolean
显示步进控制条 - numberMin
Number|Function
最小数值 - numberMax
Number|Function
最大数值 - numberPrecision
Number
数值精度 - numberStep
Number
步进值 - switchActiveValue
Number|String|Boolean
开关打开时的的值 - switchinactiveValue
Number|String|Boolean
开关关闭时的值 - uploadUrl
String|Function
文件上传 URL - checkUrl
String|Function
检查服务器文件是上传情况 - mergeUrl
String|Function
请求文件合并 URL - fromTable
String
文件关联表 - downloadUrl
String|Function
文件下载 - placeholder
String
表单占位符 - fileList
Array<Object>
附件时,文件列表 - action
String|Function
图片文件上传地址 - imageUrl
String|Function
图片预览地址 将替换$id - listType
String
图片组件类型 - tableCellOnClick
Function
点击单元格事件 - showTableColumn
Boolean
显示在表格中 - showExpandItem
Boolean
显示在展开行 - showFormItem
Boolean|Function
显示在表单中 - showPreviewItem
Boolean|Function
显示在预览中 - filterType
String
筛选类型 dateRange|select|selectMulti|boolean|text - filterDateType
String
筛选日期类型(dateRange) year|month|date|dates| week|datetime|datetimerange|daterange|monthrange - filterEventMaps
Object<Function>|Function
筛选日期类型(dateRange) year|month|date|dates| week|datetime|datetimerange|daterange|monthrange - initalValue
any
初使值 - formatterFunction
Function
格式化方法- 参数1 单元格值
- 参数2 列属性
- 参数3 行数据
postFormatterDataFunctionFunction
添加更新时的数据格式化editFormatterDataFunctionFunction
编辑时的数据格式化- tableColumnWidth
Number|String
表格列宽度 - fixed
String
固定定位 - formatterFunction
Function
格式化显示文本 - isTreeNode
Boolean
是树型展开的节点 - downloadUrl
String
下载链接 替换$id - formatTextFunction
Function
格式化自定义日历的内容 - align
left(左对齐)| center(居中对齐)| right(右对齐)
列对齐方式 - headerAlign
left(左对齐)| center(居中对齐)| right(右对齐)
表头对齐方式 - filterInitialValue 高级查询初使值
- formLabelWidth
String|Number
单标签宽度 - formOnClick
Function
点击表单事件 - formatterFormFunction
Function
格式化表单方法 参数 { formData, value } - exportMethod
Function
导出内容格式化 参数 { row, column, options } - cellRender
Function|Object
表格内容渲染 参数 { row, column, ... } 返回值 { jsx } - headerParentName
String
父表头name
- name
isPreview 预览
Boolean
- expandTableFieldData
Array<Object>
展开表格的字段配置 - fnPropExpandTableListRecord
Function
展开表格的请求方法 - fnPropDelDataFromIds
Function
删除的请求方法 - fnPropEditRecordDataFromRow
Function
点击编辑记录的数据方法 - fnPropAddRecord
Function
新增的方法 - fnPropUpdateRecord
Function
更新的方法 - fnPropListRecord
Function
获取列表的方法 - fnPropExportExcel
Function
导出 Excel 的方法 eventMaps
Object<Function>
事件集合- checkboxChange 多行选中行时
- 参数 {records,reserves,indeterminates,checked,row,rowIndex,column,columnIndex}
- radioChange 单行选中时
- 参数 {newValue,oldValue,row,rowIndex,column,columnIndex}
- expandChange 当行展开或收起时会触发该事件
- 参数 { expanded, row, rowIndex, column, columnIndex }
- filterSubmit 过滤提交时
- 参数 当前过虑表单数据
- refreshTable 点击表格刷新时
- clickAddBtn 点击添加按钮时
- getListData 获取列表数据成功后
- 参数 数据列表
- importExcelSuccessAfter 导入文件时 status:200 后
- 参数1 响应数据
- 参数2 文件信息
- cellSelected 单元格被选中时会触发该事件
- 参数 { row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }
- checkboxAll 多行全选时
- 参数 {records,reserves,indeterminates,checked}
- closeFormDialog 关闭表单弹窗时
- 参数 弹窗类型状态
- clickFooterCell 点击表尾单元格
- 参数 { items, $rowIndex, column, columnIndex, $columnIndex, $event }
- checkboxChange 多行选中行时
configData
Object
- size
String
组件大小 medium|small|mini - headers
Object
请求头信息 - disableToolBar
Boolean
禁用表格工具栏 - disableRefresh
Boolean
禁用刷新按钮 - disableCustom
Boolean
禁用自定义列 - disablePrint
Boolean
禁用打印 - disableAdd
Boolean
禁用添加 - disableDelete
Boolean
禁用删除 - disableMultipleDelete
Boolean
禁用多选删除 - disableAudit
Boolean
禁用审核 - disableImport
Boolean
禁用导入 - disableExport
Boolean
禁用导出 - disableCheckbox
Boolean
禁用多选 - disableRadio
Boolean
禁用单选 - disableSequence
Boolean
禁用序号列 - disablePreview
Boolean
禁用预览按钮 - disableEdit
Boolean
禁用编辑按钮 - disablePaging
Boolean
禁用分页 - disableDragColumn
Boolean
禁用拖动列 - hideOverflow
Boolean
单元格不换行 - showDefaultExport
Boolean
显示默认导出 - showRadio
Boolean
显示单选 - disableFixedFilter
Boolean
禁用固定高级查询在左侧 - disableSearch
Boolean
禁用搜索 - searchPlaceholder 搜索占位符
- id
String
唯一标识 记录列顺序、显隐等 - tree
Object
树型配置- enabled
Boolean
启用 - childrenName
String
子列字段名称 - expandAll
Boolean
展开所有 - trigger
String
触发方式
- enabled
- align
String
对齐方式 - tableHeight
Number||String
表格高度 auto|empty|Number - fnTableHeaderCellClassName
Function
表格表头 Class 名称方法 - fnTableRowClassName
Function
表格行 Class 名称方法 - fnTableCellClassName
Function
单元格 Class 名称方法 - fnTableHeaderCellStyle
Function
表格表头样式方法 - fnTableRowStyle
Function
表格行样式方法 - fnTableCellStyle
Function
单元格样式方法 - pagingAlign
String
分页对齐方式 - formSize
String
表单样式大小 - editLabelWidth
String
表单标签宽度 - importExcelAction
String
导入表格的地址 - importExcelSize
Number
导入表格的限制大小 - showExportField
Boolean
导出时选择字段 - operateExtraWidth
Number
操作列增加宽度 - pageSize
Number
页数量 - title
String
标题 - disableScrollY
Boolean
是否禁用Y轴虚拟滚动 - disableScrollX
Boolean
是否禁用X轴虚拟滚动 - footerMethod
Function
设置表尾数据- 参数 { columns, data }
- 返回二维数组 第二维为每列的值
- mergeCells
Function|Array
合并单元格- 对象数组 Array<{ row: number, col: number, rowspan: number, colspan: number }>
- disableDragSelect
Boolean
禁用拖动选择列 - disableDragTree
Boolean
禁用拖动树型列 - disableDragExpand
Boolean
禁用拖动展开列 - disableDragSeq
Boolean
禁用拖动序号列 - fixedSelect
Boolean
选择列固定在左侧 - fixedSeq
Boolean
序号列固定在左侧 - filterLabelWidth
String
高级查询标签宽度 - enableSelectCell
Boolean
启用选择单元格 - formInitData
Object
表单初使数据 - baseApi
String
请求地址 - exportModes
Array<string>
前端导出输出数据的方式列表- current, selected, all
- showAdd
Boolean
显示添加按钮 - showDelete
Boolean
显示删除按钮 - showEdit
Boolean
显示修改按钮 - rowHeight
Number
表格行高 - defaultSort
Object<{ field: String, order: String }>
默认排序字段 - showImport
Boolean
显示导入按钮 - showExport
Boolean
显示导出按钮 - hideHeaderOverflow
Boolean
隐藏表头省略 - stripe
Boolean
是否带有斑马纹
- size
方法
- execMethod
req: {type, params}- recalculate(refull:Boolean) 重新计算表格
- refull 完整计算
- updateData 更新数据
- insertAt(records, row) 临时插入数据
- row 指定位置、null从第一行插入、-1 从最后插入
- getTableData 获取表格的数据
- getRadioRecord 用于radio,获取当前已选中的行数据
- getCheckboxRecords 用于checkbox,获取当前已选中的行数据
- getRowExpandRecords 获取已展开的行数据
- setRowExpand(rows, checked:Boolean) 设置要展开的行
- checked 展开或折叠
- setRadioRow(row) 设置某一行为选中状态
- setCheckboxRow(rows, checked:Boolean) 设置行为选中状态
- getSelectedCell 获取选中的单元格信息
- recalculate(refull:Boolean) 重新计算表格
- fnResetFormData 清空表单数据
fnSetData({ variate, prop, value }) 修改data数据旧
- variate 变量名
- prop 子属性
- value 值
- fnSetData(variate, property, value) 修改数据
新
- fnGetData(variate:String, property:String|Array, defaultValue) 获取数据
- reloadData(
Object
) 重新加载表格数据- page
Number
页码 default:当前页
- params
Object
传递到请求的其他数据 - filter
Boolean
是否传递高级查询和关键词的数据 default:true
- page
插槽
- expand 展开行内容
- row 当前行数据
- operateExtraButton 操作列扩展按钮
- row 当前行数据
- importBefore 导入表格前的内容
- importBefore 表单内容
- toolbarButton 工具栏按钮
- selectedRow 选中的行数据
- toolbarTool 右侧工具列表插槽
- selectedRow 选中的行数据
- formFooterAfter 表单底部按钮
- formStatus 状态
- formFooterBefore 表单底部按钮
- formStatus 状态
迁移
待补充
1 month ago
2 months ago
2 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
6 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
9 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago