jsmom-table-form

v1.2.9

Published

13 days ago

表格表单组件

Downloads

0High
0Medium
0Low

jsmom

vue 表格表单

表格表单组件

安装

npm i jsmom-table-form -S

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|radio
- 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 行数据
- ~~postFormatterDataFunction Function 添加更新时的数据格式化~~
- ~~editFormatterDataFunction Function 编辑时的数据格式化~~
- 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
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 }
- scroll 表格滚动时
  - 参数 { type, scrollTop, scrollLeft, scrollHeight, scrollWidth, bodyWidth, bodyHeight, isX, isY, $event }
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 触发方式
- 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 合并单元格
  - 参数1 tableData
  - 参数2 computeColumnOrder
  - 对象数组 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 是否带有斑马纹
- rowIsCurrent Boolean 当鼠标点击行时，是否要高亮当前行
- disableRowIsHover Boolean 禁用高亮鼠标当前行
- operateFixed String 操作列固定方式默认right

方法

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 获取选中的单元格信息
- scrollToRow(row, fieldOrColumn) 滚动到对应的行
- setCurrentRow(row) 设置某一行为高亮状态
- scrollTo(scrollLeft, scrollTop) 滚动到对应的位置
fnResetFormData 清空表单数据
~~fnSetData({ variate, prop, value }) 修改data数据~~ 旧
- variate 变量名
- prop 子属性
- value 值
fnSetData(variate, property, value) 修改数据 新
- variate 变量名
- property 属性如：'a.b'、'a.d[0]'、'a.d[1].f'
- value 值
fnGetData(variate:String, property:String|Array, defaultValue) 获取数据
- variate 变量名
- property 属性如：'a.b'、'a.d[0]'、'a.d[1].f'、['a', 'c']
- defaultValue 默认值
reloadData(Object) 重新加载表格数据
- page Number 页码 default: 当前页
- params Object 传递到请求的其他数据
- filter Boolean 是否传递高级查询和关键词的数据 default: true

插槽

expand 展开行内容
- row 当前行数据
operateExtraButton 操作列扩展按钮
- row 当前行数据
importBefore 导入表格前的内容
- importBefore 表单内容
toolbarButton 工具栏按钮
- selectedRow 选中的行数据
toolbarTool 右侧工具列表插槽
- selectedRow 选中的行数据
formFooterAfter 表单底部按钮
- formStatus 状态
formFooterBefore 表单底部按钮
- formStatus 状态

迁移

待补充

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

表格表单组件

安装

使用

配置

方法

插槽

迁移