云智开发平台

# 报表类

# 表格

概述

高优先级
非常重要的一个组件,通过为他设置fetch-method实现表格数据的加载。
通常与表单连用，表单作为查询条件的提供者，表格作为数据的展示者。
您可以手动调用requestData()方法触发表格重新加载数据，这通常会在多表联动时用到。
您还可以为表格的行列设置样式，row-style和cell-style是一个函数您可以在函数里判断数据，施加不同的样式。
同时他还提供了排序、分页、统计、树形等功能。

  • data
名称 类型 默认值 说明 示例
data array null 表格数据 $("table-1").data
getSelection Object null 表格中选中的数据 $("table-1").getSelection
page {pageNum: '当前页码', pageSize: '每页条数', total: '总条目数'} null 分页相关信息 $("table-1").page
  • prop
名称 类型 默认值 显示名 说明
columns array [] 表列配置 表格的列配置
fetch-method function 请求方法 表格请求数据的回调函数，从表格内部回传的状态有：pageNum分页：当前页码,pageSize分页：每页条数,startIndex分页：开始索引,endIndex分页：结束索引resolve回传方法
selectable boolean false 多选 设置表格是否可多选
row-style function (row,rowIndex) => {} 行style 用于动态设置表格行的样式,回调函数参数有row行数据、rowIndex行索引
cell-style function (row,column,rowIndex,columnIndex) => {} 单元格style 用于动态设置表格单元格的样式,回调函数参数有row行数据、column列数据、rowIndex行索引、columnIndex列索引
showOverflowTooltip boolean true 溢出隐藏 数据过长时内容溢出隐藏，以免换行
indexable boolean true 序号 控制表格是有序号
sortable boolean false 排序 控制表格是否可以排序
pageAble boolean true 分页 控制表格是否支持分页
border boolean true 边框 控制表格是否有内边框
show-summary boolean false 统计 控制表格是否有统计栏
tree-table boolean false 树形表格 控制表格是否以树形表格形式展示
nodeKey string id 主键字段 表格数据主键字段
parentNodeKey string parentId 关联字段 表格数据关联父级字段，配合树形表格和主键字段生效
show-header boolean true 显示表头 设置表格是否显示表头
highlight-current-row boolean false 当前行高亮 点击表格行时当前行是否高亮
stripe boolean false 斑马线 是否开启表格斑马线
pageTotalKey string bigTotalItems 条目字段 对应接口返回的总行数字段
  • event
名称 类型 说明 示例
row-click ($context: {row: 数据：行数据, column: 列数据, event: 事件对象}) 单击行 $context.row
row-dblclick ($context: {row: 数据：行数据, column: 列数据, event: 事件对象}) 双击行 $context.row
cell-edit ($context: {value: 编辑数据, row: 行数据, column: 列数据, rowIndex: 行索引}) 字段编辑 $context.row
selection-change ($context: {selection: 选择的数据}) 选项改变 $context.selection
cell-click ($context: {row: 数据：行数据, column: 列数据, cell: 单元格数据, event: 事件对象}) 点击单元格 $context.row
cell-dblclick ($context: {row: 数据：行数据, column: 列数据, cell: 单元格数据, event: 事件对象}) 双击单元格 $context.row
page-change ($context: {pageNum: 分页：当前页码, pageSize: 分页：每页条数, startIndex: 分页：开始索引, endIndex: 分页：结束索引, resolve(): 回传方法}) 翻页 $context.resolve(data)
current-change ($context: {currentRow: 当前行数据, oldCurrentRow: 切换前所在行数据}) 切换选中行 $context.currentRow
row-contextmenu ($context: {column: 列数据, event: 事件对象}) 右键单击行 $context.currentRow
head-click ($context: {row: 数据：行数据, column: 列数据, event: 事件对象}) 右键单击行 $context.currentRow
header-contextmenu ($context: {column: 列数据, event: 事件对象}) 右击表头 $context.currentRow
  • method
名称 参数 返回值 说明 示例
requestData (rowIndex: number) void 解锁表格索引的行 $("table-1").setEdit([1])
requestData () void 请求数据 $('table-1').requestData()
setData (data: array) void 设置表格的数据 $('table-1').setData([row1,row2])
getData () array 获取表格的数据 $('table-1').getData()
setRead () void 设置表格为只读 $('table-1').setRead()
setEdit (index: array,field: array) void 表格进入编辑状态，第二个属性传入的字段将只读,不传则全进入编辑状态 $('table-1').setEdit([0,1],['field1',field2])
getSelection () array 获取表格选中数据 $('table-1').getSelection()
getTotal () number 获取表格的数据 $('table-1').getTotal()
setTotal (total: number) void 设置表格数据总条数 $('table-1').setTotal(10)
addRow () array 在表格尾部添加空行 $('table-1').addRow()
addRow () array 在表格头部添加空行 $('table-1').addRow(null, true)
addRow () array 在表格尾部添加指定行数据 $('table-1').addRow(row)
removeRow (rowIndex: number) void 删除指定索引的行 $('table-1').removeRow([1])
removeSelectionRow () array 删除表格中选中的行 $('table-1').removeSelectionRow()
importExcle () void 导入excle到表格 $('table-1').importExcle()
exportExcle () void 简单导出表格数据为excle文件 $('table-1').importExcle()
exportExcle (customizeFielName: boolean , fileName: string) void 用户自定义文件名导出表格数据为excle文件 $('table-1').exportExcle({customizeFielName: true, fileName: '表格数据'})
showColumn (columnKeys: string) void 显示指定列 $('table-1').showColumn('con_no')
showColumn (columnKeys: array) void 显示多个列 $('table-1').showColumn(['con_no', 'con_name'])
hideColumn (columnKeys: string) void 显示指定列 $('table-1').hideColumn('con_no')
hideColumn (columnKeys: array) void 显示多个列 $('table-1').hideColumn(['con_no', 'con_name'])
show () void 显示表格 $('table-1').show()
hide () void 隐藏表格 $('table-1').hide()

# 日历表格

概述

高优先级
当想要数据通过时间来区别时，可以使用日历表格结构来实现，例如：查询每天单据的总体数量，以及每个时间区间的单据状态分别的汇总数量。

  • data
名称 类型 默认值 说明 示例
data array null 表格数据 $context.data
id array null 表格数据id $context.id
name array null 表格数据名称 $context.name
num array null 表格数据条数 $context.num
type array null 表格数据类型 $context.type

# 树形

概述

中优先级
当数据结构是多层级联的时候，表格往往不能很好的表现数据之间的层级关系，这时候我们就应该使用树形结构来显示，例如用户-角色-权限。 树形组件提供了选择、展开、获取叶子结点数据、懒加载等功能。

数据结构:

let data = [
    { labelField: '一', nodeKey: '1-1', parentNodeKey: '-1' },
    { labelField: '1-1', nodeKey: '2', parentNodeKey: '1-1' },
    { labelField: '1-2', nodeKey: '3', parentNodeKey: '1-1' },
    { labelField: '二', nodeKey: '1-2', parentNodeKey: '-1' },
    { labelField: '2-1', nodeKey: '4', parentNodeKey: '1-2' },
    { labelField: '2-2', nodeKey: '5', parentNodeKey: '1-2' }
]
$context.resolve(data)
  • data
名称 类型 默认值 说明 示例
data array null 树形组件数据 $("tree-1").getData()
selection Object null 树形组件选中的数据 $("tree-1").selection()
  • prop
名称 类型 默认值 显示名 说明
labelField string '' 显示字段 树形结构中用于显示的字段
nodeKey string id 主键字段 表格数据主键字段
parentNodeKey string parentId 关联字段 表格数据关联父级字段，配合树形表格和主键字段生效
showCheckbox boolean false 多选 树形组件是否支持多选
checkOnClickNode boolean false 点击节点选择 是否点击节点切换选择状态
expandOnClickNode boolean false 点击节点展开 是否点击节点进行展开
draggable boolean false 拖拽 是否支持拖拽
accordion boolean false 手风琴 是否开启手风琴模式
defaultExpandAll boolean false 默认展开所有 是否默认展开所有节点
lazy boolean false 懒加载 是否懒加载
load function '' 懒加载方法 用于懒加载的方法
  • event
名称 类型 说明 示例
node-click ($context: {node :当前节点数据, data :tree数据}) 点击节点 $context.node
node-contextmenu ($context: {node :当前节点数据, data :tree数据}) 右键点击节点 $context.node
check-change ($context: {checkedNodes :当前所有选中的节点数组,halfCheckedNodes :当前半选中的节点数组,checkedKeys :当前所有选中的节点Key数组,halfCheckedKeys :当前半选中的节点Key数组}) 选择改变 $context.checkedNodes
  • method
名称 参数 返回值 说明 示例
requestData () void 请求数据 $('tree-1').requestData()
setData (data: array) void 设置树形组件的数据 $('tree-1').setData([row1,row2])
getData () array 获取树形组件的数据 $('tree-1').getData()
getSelection () array 获取树形组件中选中数据 $('tree-1').getSelection()
show () void 显示树形控件 $('tree-1').show()
hide () void 隐藏树形控件 $('tree-1').hide()

← 基础类 →