Skip to content

Table 表格 ​

用于展示多条结构类似的数据, 可对数据进行排序、筛选。

TIP

Table 组件对应 GvTable,下方示例可直接交互,点击「显示代码」查看源码。

API ​

Table Attributes ​

属性名说明类型默认值
ref-table设置table的ref属性String—
table-head设置table的表头Array—
table-type设置表格类型String—
table-data设置table的内容Object, Array—
visible设置是否可见Booleantrue
table-sort设置排序组件是否可见Booleantrue
is-show-page设置分页组件是否可见Booleantrue
multi设置多选表格Booleanfalse
height设置table的高度Number, String—
max-height设置table的最大高度Number, String384
page-size设置table的每页大小Number, String10
layout设置table的分页插件布局String—
table-fetch设置table的查询方法(render方式table有效)Function—
row-class-name设置行样式方法Function—
row-style设置行样式方法Function—
cell-style设置单元格样式方法Function—
before-import设置导入前置方法Function—
table-filter表格查询的过滤条件Object—
table-cb表格加载完成后的回调方法Function—
table-init表格初始化渲染方法Function—
total新设置表格是否显示统计信息Booleanfalse

Table Events ​

事件名说明类型
row-dblclick双击行触发事件(row, column, event) => void
row-click点击行触发事件(row, column, event) => void
selection-change多选行选中事件(selection) => void

Table Slots ​

插槽名说明
import列表导入按钮插槽
export列表导出按钮插槽

Table-Column Attributes ​

参数说明类型可选值默认值
type设置table的column列类型Stringtext / action / dic / tagtext
prop设置table的column对应字段属性String——
label设置table的column名字String——
fixed设置table的column是否是固定锁定Stringleft / right / true—
width设置table的column列宽度Number——
minWidth设置table的column列最小宽度Number—135
align设置table的column列对齐方式Stringleft / rightleft
formatter设置table的column列格式化方法Function——
dicType设置table的column列字典类型String——
filtercode设置table的column列字典类型过滤String——
showLabel设置table的column列字典类型默认显示值String——
dicRemote设置table的column列字典类型表选Function——
isreload设置table的列字典类型是否重新加载Booleantrue / falsefalse
cb设置table的column列字典类型选中回到函数Function——
multiple设置table的列字典类型是否多选Booleantrue / falsefalse
dateType设置table的column列日期类型Stringdate / datetimedate
query设置table的column列是否可搜索Booleantrue / falsefalse
render设置table的column列内容渲染方法Function——
content设置table的操作列定义Array——
action设置table的操作列响应方法Array——
edit设置table的column是否可编辑Booleantrue / falsefalse
format设置table的编辑列格式Array——
cellBlur设置table的编辑列失去焦点方法Function——
cellEnter设置table的编辑列回车事件方法Function——
hidden设置table的列是否隐藏Booleantrue / falsefalse
selectable返回值用来决定这一行是否可以勾选Function——
min设置行编辑的number框最小值Number——
max设置行编辑的number框最大值Number——
sum新设置table的column列是否开启合计Booleantrue / falsefalse
decimal新sum为true时,设置统计列小数位数Number—0