Table 用来展示 list data ,配置项如下:
当前组件的名称, 没特殊要求,当前窗口唯一,字符串。
当前Form绑定的实体,entity 或者 DTO
根据当前行的数据进行业务处理,返回一个id ,此 id 对应的样式在下面的脚本中配置。与 样式脚本 配合使用。举例:`return record.age === 27 ? '11111' : '0';` 此脚本使用 js 写, record 指当前行的数据。
样式脚本,数组,与 样式规则脚本 配合使用,返回一个包含多种配置(每个配置有一个对应的唯一id)的数组。举例
return [ { fieldName: ['key', 'ocId', 'Edit'], // 指定生效的列 textColor: 'blue', // 单元格字体颜色 cellBackgroundColor: 'pink', // 单元格背景色 id:'11111' // 唯一id } ] |
指定后端返回的数据中以哪个字段的值作为表格每一行数据的_rowid
执行平台通用查询时,默认的eagerProperties
固定操作列,有 4 个选项:空白(无悬浮,默认),false(无悬浮),left (左侧悬浮),right(右侧悬浮)
操作列宽度,百分比或者固定宽度,举例:20% 或者 100px
除了操作列,还可以配置一个类似操作列的列用来放操作按钮。
如果当前组件需要展示树形结构的数据,那么需要选择树形节点对应的字段名称,默认 children。
组件 Size,有 3 个可选值,默认值,middle,small, theme 中的 size 优先级 < 此处 sizie 优先级
是否展示边框,size 为 small 时,此选项无效,统一显示边框。
显示底部(table footer)
底部显示统计,比如:需要算一些求和,平均数等。
显示列头名称,默认勾选
是否显示序号
显示列过滤功能
可以接收从别的 Table 拖拽过来的行
可以将某一行拖出,包括 Table 内部拖拽和跨 Table 拖拽。
行拖入后自动更新列表数据,仅前端数据更新,并不更新数据库
table组件点击分页信息或者tableHeader中的过滤条件时会自动触发 query 查询。勾选此项以后,进行上述操作不再触发 query 查询。
当前列如果配置了options,但是表格中某一行此列的数据与options中的key不匹配,是否显示此列的值。
勾选后,表格的列标题右侧显示如图,点击锁图标后,当前列会作为表格的首列
勾选后,表格的列标题左侧显示如图,鼠标移上去后变为十字箭头形状,支持拖拽列改变列的顺序
通过拖拽调整列的顺序。
列左悬浮或者右悬浮的时候,需要指定滚动区域的宽度,举例:1000px
头部悬浮时,需要指定滚动区域的高,举例:500px
配置行的选择模式,默认不可勾选,checkbox: 可多选,radio:可单选
此属性已经去掉。
选择模式为 checkbox 时生效,是否显示 全选 反选 两个默认选项,默认不勾选,此项不常用。
用来控制 checkbox/radio 是否显示。
用来控制 checkbox 和 radio 的 disable/enable
用来控制 打开/关闭 子窗口/折叠行 的 图标是否显示。
用来控制当前行数据发生变化时是否更新子窗口。
是否显示分页
分页组件的位置,有 3 个选项,top:分页显示在上面 bottom: 分页显示在下面 both: 上面和下面均显示分页
配置每页可以显示多少条数据,默认 20,如果配置多个选项,则第一个选项作为默认值。
是否可以快速跳转至某页
是否可以改变 pageSize,与 指定每页可以显示多少条配合使用。
数据总数作为改变 pageSize 的选项
显示数据总数,可以指定显示的文本模板
显示数据总数 的模板,举例:需要显示: 共计 XXX 条保单信息 ,模板应该配置: 共计${total}条保单信息
设置初始化加载数据时的排序字段,从Table 绑定的实体上面选择字段。可以多选。
需要排序的字段名称
按指定的排序方式进行排序,ascend: 正序,descend:倒序
如果表格的行需要嵌套子表格,此项需要绑定子表格所在的 window 。
给要打开的窗口的上下文,可以配置多个,包括主键,类型,值。
按钮的名称
操作列中的按钮的显示类型,link: 显示为超链接样式 icon: 显示为 icon ,default,primary,danger,dashed 这四个配置项与 Button 组件的 Type 属性一直。
需要显示图标时,配置的图标名称
当前组件的名称, 没特殊要求,当前窗口唯一,字符串。
当前按钮的显示规则,可以自定义,举例:
if (record.age > 25) { // 年龄大于 25 岁的不显示此按钮 return {visible: false}; } return {visible: true} |
当前按钮是否可用,可以自定义,举例:
if (record.sex === 'M') { // 性别为 M 的此按钮不可用 return {disabled: false}; } return {disabled: true} |
此按钮可以配置对应的 event ,此处仅可配置 onClick 。
此项会列出现有的所有的列,可以调整列位置(通过上下箭头)和列的标题名称
操作列显示迷你模式,勾选此项以后,会显示一个 icon 按钮,点击或鼠标经过此按钮,会出现所有按钮的下拉列表,下面出现迷你按钮的配置项:
迷你按钮的 icon 类型,可以是 antd 自带的 icon , 或者文本或者图片url
icon的内容(icon或者文本内容或者url)
显示下拉按钮列表的触发方式,hover :鼠标经过,click :点击
下拉按钮列表的显示位置(相对于迷你按钮的位置)
按钮列表宽度(单位:px)
使用GraphQL查询数据时,需指定返回的数据中哪个字段作为Table中每一行数据的_rowid
Table无数据显示时,展示一个引导按钮。如下图:
提示语、引导按钮标题、按钮点击事件均可配置
Table组件是否支持通过SearchForm的方式进行查询
每一行显示多少个查询组件
配置searchForm中显示的按钮,默认为:重置、查询
勾选后,表格组件顶部会显示toolbar组件
暂未实现
在Table右上角显示,如下图中的:搜索此列表查询框。
在Table组件右上角显示,如下图中的:导出按钮
在Table组件右上角显示,如下图中的:新增及其子菜单
Table选择数据后,需显示的按钮,如下图中的:批量设置就餐权限、导出等。
点击页面中的某一列,会出现当前列的配置项
当前列的名称
当前列绑定的字段
列宽
开启服务端排序功能
开启过滤功能,此项需要选择 编辑时的控件类型 方可生效,根据 编辑时的控件类型 的值不同,显示不同的过滤组件
相邻的行相同的字段如果值也相等,是否合并单元格(上下合并)
可以不设置,也可以做悬浮(固定)或者右悬浮(固定)
勾选后,文字超出列的宽度时,不再显示超出的内容。鼠标移上去后,会展示隐藏的内容。
列配置了支持过滤时,过滤条件可以引用一个窗口,如下图中的团名称
列过滤是引用子窗口时,选中后用作 fieldValue 的字段名称。
列过滤是引用子窗口时,选中后用作显示在toolbar中的字段。
列过滤是引用子窗口时,下拉框的宽度。
编辑时的控件类型,此项是配合 过滤 功能使用的。
通过脚本控制是否可编辑,比如:年龄大于50岁的方可编辑。
执行脚本返回对应显示前缀。
勾选后,当前列展示数据时,会带有超链接样式
来控制某种情况下显示超链接样式,如下图所示,审核通过的数据显示超链接样式:
Rate 激活 icon 的颜色(编辑时的控件类型为 Rate 时生效),颜色值,举例:rgba(0, 0, 0, 0,5),rgb(xx,xx,xx),#000
Table 勾选了 底部显示统计 后,在需要统计的列配置聚合方法
当前行单击时,支持就地编辑
当前列是否可见
此列作为SearchForm中的组件时,label占位格数
此列作为SearchForm中的组件时,value占位格数