编辑表格
npm install jsmom-edit-table
javascript import EditTable from "jsmom-edit-table";
- 注册
javascript components: { EditTable, }
- 页面
html
配置 - fieldData
字段配置 - name
字段名 - text
展示文本 - formType
类型 select|cascader|selectData|textarea|datetime|date|images|file|number|switch|content|text - enumName
枚举名 - formRules
表单验证规则 - inputStyle
表单输入项 style - selectMultiple
多选 - clearable
可被清理 - optionLoading
选择列表加载中 - isLazy
懒加载(级联选择) - lazyLoadFunction
懒加载函数(级联选择) - showAllLevels
显示所有级(级联选择) - isCheckStrictly
父子不关联(级联选择) - isCollapseTags
折叠选项 - selectOption
选择项 - 参数 1: rowIndex - 参数 2: row - 参数 3: tableFormItem - allowCreate
手动创建选择项 - filterable
是否可搜索 手动创建开启时必须为 true - defaultFirstOption
回车时选择第一个 - dateType
日期类型 year|month|date|dates| week|datetime|datetimerange|daterange|monthrange - selectTable
选择表 - selectParams
选择额外的参数(selectData) - formEventMaps
表单多动态事件 - selectBind
关联其他字段(selectData) - disabled
禁用表单 - disabledFunction
禁用表单 - isExpandTableId
是展开表格数据 id 出现一次即可 - valueFormat
格式化时间值 - textareaRowNum
文本域显示行数 - limit
限制文件图片数量 - showStepControls
显示步进控制条 - numberMin
最小数值 - numberMax
最大数值 - numberPrecision
数值精度 - numberStep
步进值 - switchActiveValue
开关打开时的的值 - switchinactiveValue
开关关闭时的值 - placeholder
表单占位符 - showTableColumn
显示在表格中 - initalValue
初使值 - formatterFunction
格式化方法 - tableColumnMinWidth
表格列最小宽度 - tableColumnWidth
表格列默认宽度 - fixed
固定定位 - formatterFunction
格式化显示文本 - fnPropDelDataFromIds
删除的请求方法 - fnPropAddData
新增的方法 - fnPropSaveData
保存的方法 - fnPropListRecord
获取列表的方法 - eventMaps
事件集合 - checkboxChange 多行选中行时 - 参数 {records,reserves,indeterminates,checked,row,rowIndex,column,columnIndex} - radioChange 单行选中时 - 参数 {newValue,oldValue,row,rowIndex,column,columnIndex} - refreshTable 点击表格刷新时 - deletedRow 删除行时 - 参数 rowIndex - configData
- size
组件大小 medium|small|mini - headers
请求头信息 - disableToolBar
禁用表格工具栏 - disableRefresh
禁用刷新按钮 - disableCustom
禁用自定义列 - disablePrint
禁用打印 - disableAdd
禁用添加 - disableDelete
禁用删除 - disableMultipleDelete
禁用多选删除 - disableSave
禁用保存 - disableSequence
禁用序号列 - disablePreview
禁用预览按钮 - disableEdit
禁用编辑按钮 - disablePaging
禁用分页 - disableRowSort
禁用行排序 - showRowSort
显示行排序 - showRadio
显示单选 - showCheckbox
显示多选 - disableSearch
禁用搜索 - hideDelete
隐藏删除 - id
唯一标识 记录列顺序、显隐等 - operateFixed
排作列固定 - align
对齐方式 - table - height
表格高度 auto|empty|Number - fnTableHeaderCellClassName
表格表头 Class 名称方法 - fnTableRowClassName
表格行 Class 名称方法 - fnTableCellClassName
单元格 Class 名称方法 - fnTableHeaderCellStyle
表格表头样式方法 - fnTableRowStyle
表格行样式方法 - fnTableCellStyle
单元格样式方法 - pagingAlign
分页对齐方式 - formSize
表单样式大小 - editLabelWidth
表单标签宽度 - importExcelAction
导入表格的地址 - importExcelSize
导入表格的限制大小 - showExportField
导出时选择字段 - operateExtraWidth
操作列增加宽度 - title
标题 - fixedSelect
选择列固定在左侧 - showFilter
显示过滤 - footerMethod
设置表尾数据 - 参数 { columns, data, formData } - enableDragColumn
启用拖动列支持 方法 - 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 默认值 - fnInsertData(dataArr, index) 插入数据 - index 位置 默认最后一行 - fnDeleteData(index, number) 删除数据 - number 删除数量 默认为 1 - fnGetTableForm() 获取表单数据 - 包含排序 - fnGetTableData() 获取表格数据 - 包含排序 - fnGetRowSort() 获取排序 - execMethod req: {type, params} - getRadioRecord 用于 radio,获取当前已选中的行数据 - getCheckboxRecords 用于 checkbox,获取当前已选中的行数据 - getRowExpandRecords 获取已展开的行数据 - setRowExpand(rows, checked:Boolean) 设置要展开的行 - checked 展开或折叠 - setRadioRow(row) 设置某一行为选中状态 - setCheckboxRow(rows, checked:Boolean) 设置行为选中状态 - updateFooter() 手动更新表尾 - reloadData(
) 重新加载表格数据 - page
页码 default:
- params