Table

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

基础用法

显示工具栏

多选

多级表头

自定义列模板

自定义表头

展开行

树形数据与懒加载

Table 属性

属性名	说明	类型	默认值
rowKey	行数据的 Key，用来优化 Table 的渲染	`string`
indexColumn	索引序列号	`boolean \|{width: number, label: string}`	true
toolbar	是否显示工具栏	`boolean`	true
columns	列表字段	`<ITableColumn[]>(array)`
pagination	分页	`boolean/ITablePagination(object)`	ITablePagination
dataSource	数据源	`array`
border	是否带有纵向边框	`boolean`	true
loading	加载占位符	`boolean`	false
defaultSort	默认的排序列的 prop 和顺序	`<Sort>(object)`	false
cacheKey	缓存的 key	`string`	undefined
showColumnsSetting	是否显示列设置	`boolean`	true
columnSettingCache		`<ITableColumnSetting[]>(array)`
highlightCurrentRow	是否要高亮当前行	`boolean`	false
rowSelection	表格行是否可选择	`<ITableRowSelection>(object)`
maxHeight	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	`string/number`
defaultExpandAll	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	`boolean`	false
lazy	是否懒加载子节点数据	`boolean`	false
treeProps	渲染嵌套数据的配置选项	`object`
load	加载子节点数据的函数，lazy 为 true 时生效	`function(row, treeNode, resolve)`
showSummary	是否在表尾显示合计行	`boolean`	false
summaryMethod	自定义的合计计算方法	`function(SummaryMethod)`	false
tableLayout	设置表格单元、行和列的布局方式	`string`	fixed
tableLayout	设置表格单元、行和列的布局方式	`string`	fixed
cellClassName	单元格的 className 的回调方法	`string`
cellStyle	单元格的 style 的回调方法	`string`
rowClassName	行的 className 的回调方法	`string`
rowStyle	行的 style 的回调方法	`string`
spanMethod	合并行或列的计算方法	`function(row, column, rowIndex, columnIndex)`
scrollbarAlwaysOn	总是显示滚动条	`boolean`	true
customFilter	是否显示自定义筛选配置	`boolean`	false
stripe	是否为斑马纹 table	`boolean`	false
emptyText	空数据时显示的文本内容	`string`	No Data

Table 事件

事件名	说明	参数
row-click	当某一行被点击时会触发该事件	row
cell-click	当某个单元格被点击时会触发该事件	property, value
on-pagination-current-change	current-page 改变时触发	page
on-pagination-size-change	page-size 改变时触发	size
sort-change	当表格的排序条件发生变化的时候会触发该事件	`{prop, order}`
refresh	刷新列表
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow,oldCurrentRow
column-setting-change	保存列设置	ITableColumnSetting(array)
expand-change	当某一行展开或者关闭的时候会触发该事件	currentRow, expanded

Table 插槽

插槽名	说明
table-header	表格头部
table-toolbar-left	工具栏左侧
table-toolbar-right	工具栏右侧
column-{prop}	自定义列插槽，prop 为 column prop 字段
column-header-{prop}	自定义表头插槽，prop 为 column prop 字段

Table Column 属性

属性名	说明	类型	可选值
type	对应列的类型
width	对应列的宽度	`string/number`
minWidth	对应列的最小宽度	`string/number`
fixed	列是否固定在左侧或者右侧。 true 表示固定在左侧	`string/boolean`	true / left / right
sortable	对应列是否可以排序	`boolean`
sortBy	指定数据按照哪个属性进行排序	`(row: any, index: number) => string/string/object`
label	显示的标题	`string`
className	列的 className	`string`
prop	字段名称对应列内容的字段名	`string`
slot	自定义列，插槽	`boolean`
headerSlot	自定义表头，插槽	`boolean`
format	用来格式化内容	`string`
ellipsis	ellipsis	`boolean`
align	对齐方式	`string`	left / center / right
map		`object`
filters	数据过滤的选项，数组格式，每个元素都需要有 text 和 value 属性	`Array<{text: string, value: string}>`
filterMethod	过滤方法	`function(value,row,column)`
formatter	用来格式化内容	`function(row,column,cellValue,index)`
buttons		`Array<{label,actionType,visible,onClick,popconfirm}>`
onClick	点击事件	`function(row)`
children	子对象	`Array<>`

Table ​

基础用法 ​

显示工具栏 ​

多选 ​

多级表头 ​

自定义列模板 ​

自定义表头 ​

展开行 ​

树形数据与懒加载 ​

Table 属性 ​

Table 事件 ​

Table 插槽 ​

Table Column 属性 ​

Table

基础用法

显示工具栏

多选

多级表头

自定义列模板

自定义表头

展开行

树形数据与懒加载

Table 属性

Table 事件

Table 插槽

Table Column 属性