编辑表格组件

安装

npm i jsmom-edit-table -S

or

yarn add jsmom-edit-table

使用

• 引入

  import EditTable from "jsmom-edit-table";

• 注册

  components: {
      EditTable,
  }

• 页面

  <EditTable></EditTable>

配置

• fieldData Array<Object> 字段配置

  • name string 字段名
  • text string 展示文本
  • formType String|Function 类型 select|cascader|selectData|textarea|datetime|date|images|file|number|switch|content|text
  • enumName string 枚举名
  • formRules Array<Object> 表单验证规则
  • inputStyle String 表单输入项 style
  • selectMultiple Boolean|Function 多选
  • clearable Boolean 可被清理
  • optionLoading Boolean|Function 选择列表加载中
  • isLazy Boolean 懒加载(级联选择)
  • lazyLoadFunction Function 懒加载函数(级联选择)
  • showAllLevels Function 显示所有级(级联选择)
  • isCheckStrictly Boolean 父子不关联(级联选择)
  • isCollapseTags Boolean 折叠选项
  • selectOption Array<Object>|Function 选择项
    • 参数 1: rowIndex
    • 参数 2: row
    • 参数 3: tableFormItem
  • allowCreate Boolean 手动创建选择项
  • filterable Boolean 是否可搜索 手动创建开启时必须为 true
  • defaultFirstOption Boolean 回车时选择第一个
  • dateType String 日期类型 year|month|date|dates| week|datetime|datetimerange|daterange|monthrange
  • selectTable String|Function 选择表
  • selectParams Object|Function 选择额外的参数(selectData)
  • formEventMaps Object<Function> 表单多动态事件
  • selectBind Object<Function> 关联其他字段(selectData)
  • disabled Boolean 禁用表单
  • disabledFunction 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 开关关闭时的值
  • placeholder String 表单占位符
  • showTableColumn Boolean 显示在表格中
  • initalValue any 初使值
  • formatterFunction Function 格式化方法
  • tableColumnMinWidth Number|String 表格列宽度
  • fixed String 固定定位
  • formatterFunction Function 格式化显示文本

• fnPropDelDataFromIds Function 删除的请求方法

• fnPropAddData Function 新增的方法

• fnPropSaveData Function 保存的方法

• fnPropListRecord Function 获取列表的方法

• eventMaps Object<Function> 事件集合

  • checkboxChange 多行选中行时
    • 参数 {records,reserves,indeterminates,checked,row,rowIndex,column,columnIndex}
  • radioChange 单行选中时
    • 参数 {newValue,oldValue,row,rowIndex,column,columnIndex}
  • refreshTable 点击表格刷新时
  • deletedRow 删除行时
    • 参数 rowIndex

• configData Object

  • size String 组件大小 medium|small|mini
  • headers Object 请求头信息
  • disableToolBar Boolean 禁用表格工具栏
  • disableRefresh Boolean 禁用刷新按钮
  • disableCustom Boolean 禁用自定义列
  • disablePrint Boolean 禁用打印
  • disableAdd Boolean 禁用添加
  • disableDelete Boolean|Function 禁用删除
  • disableMultipleDelete Boolean 禁用多选删除
  • disableSave Boolean 禁用保存
  • disableSequence Boolean 禁用序号列
  • disablePreview Boolean 禁用预览按钮
  • disableEdit Boolean 禁用编辑按钮
  • disablePaging Boolean 禁用分页
  • disableRowSort Boolean|Function 禁用行排序
  • showRowSort Boolean 显示行排序
  • showRadio Boolean 显示单选
  • showCheckbox Boolean 显示多选
  • disableSearch Boolean 禁用搜索
  • hideDelete Boolean 隐藏删除
  • id String 唯一标识 记录列顺序、显隐等
  • operateFixed String 排作列固定
  • align String 对齐方式
  • table
    • height 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 Number 表单标签宽度
  • importExcelAction String 导入表格的地址
  • importExcelSize Number 导入表格的限制大小
  • showExportField Boolean 导出时选择字段
  • operateExtraWidth Number 操作列增加宽度
  • title String 标题
  • fixedSelect Boolean 选择列固定在左侧
  • showFilter Boolean 显示过滤
  • footerMethod Function 设置表尾数据
    • 参数 { columns, data, formData }
  • enableDragColumn Boolean 启用拖动列支持

方法

• 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(Object) 重新加载表格数据
  • page Number 页码 default: 当前页
  • params Object 传递到请求的其他数据

插槽

• operateExtraButton 操作列扩展按钮
  • row 当前行数据
  • rowIndex 当前行索引
  • tableFormItem 当前行表单数据
• toolbarButton 工具栏按钮
  • selectedRow 选中的行数据
  • selectedRowFormData 选中的行数据(表单)
• toolbarTool 右侧工具列表插槽
  • selectedRow 选中的行数据
• expand 展开行内容
  • row 当前行数据
  • tableFormItem 当前行表单数据