API 文档

Table 属性

属性名	说明	类型	可选值	默认值
list	显示的数据	ListItem[]	—	—
columns	列信息集合	Column[]	—	—
row-key	行id变量名 虚拟列表需要，如果不给保证默认值为id	String/Number	—	id
row-min-height	行最小高度 虚拟列表需要。如果不给需要保证最小高度不能低于默认值30	Number	—	30
show-header	是否显示表头	Boolean	—	true
stripe	是否为斑马纹 table	Boolean	—	false
border	是否带有纵向边框	Boolean	—	false
highlightSelectRow	是否要高亮当前行	Boolean	—	false
highlightSelectCol	是否要高亮当前列	Boolean	—	false
selection	是否支持框选	Boolean	—	false
default-expand-all	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	Boolean	—	false
header-row-class-name	表头行自定义类	(data: { row: Column[]; rowIndex: number }): string	—	() => ''
header-row-style	表头行自定义样式	(data: { row: Column[]; rowIndex: number }): string	—	() => ''
header-cell-class-name	表头单元格自定义类	(data: { row: Column[]; column: Column; rowIndex: number; columnIndex: number }): string	—	() => ''
header-cell-style	表头单元格自定义样式	(data: { row: Column[]; column: Column; rowIndex: number; columnIndex: number }): string	—	() => ''
row-class-name	行自定义类	(data: { row: ListItem; rowIndex: number }): string	—	() => ''
row-style	行自定义样式	(data: { row: ListItem; rowIndex: number }): string	—	() => ''
cell-class-name	单元格自定义类	(data: { row: ListItem; column: Column; rowIndex: number; columnIndex: number }): string	—	() => ''
cell-style	单元格自定义样式	(data: { row: ListItem; column: Column; rowIndex: number; columnIndex: number }): string	—	() => ''

Column 属性

属性名	说明	类型	可选值	默认值
id	必传	string|number
title	显示的标题	string	—	—
type	对应列的类型。 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮；如果设置了checkbox则显示多选框；	string	index / expand / checkbox	—
index	如果设置了 type=index，可以通过传递 index 属性来自定义索引	number / function(index)	—	—
field	字段名称：对应列内容的字段名	string|number
width	对应列的宽度	number	—	—
min-width	当设置 resizable 时，对应列的最小宽度	number
max-width	当设置 resizable 时，对应列的最大宽度	number
resizable	对应列是否可以通过拖动改变宽度（当 border 属性为 false 时，仍然支持调整列宽，但表头会单独显示右边框线）	Boolean
fixed	列是否固定在左侧或者右侧。	string	'left' / 'right' / ''	—
align	表格的对齐方式（表头和表身）	string	left / center / right	left
header-align	表头对齐方式， 若不设置该项，则使用表格的对齐方式	string	left / center / right	—
children	嵌套列	Column[]
class-name	列的 className	string	—	—
header-render	自定义渲染表头单元格	function(column)	—	—
body-render	自定义渲染变身单元格	function(column, row)	—	—

Table 事件

事件名	说明	回调参数
header-click	当某一列的表头被点击时会触发该事件	data: { event, column }
header-dblclick	当某一列的表头被双击时会触发该事件	data: { event, column }
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	data: { event, column }
row-click	当某一行被点击时会触发该事件	data: { event, column, columnIndex, row rowIndex }
row-dblclick	当某一行被双击时会触发该事件	data: { event, column, columnIndex, row rowIndex }
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	data: { event, column, columnIndex, row rowIndex }
cell-click	当某个单元格被点击时会触发该事件	data: { event, column, columnIndex, row, rowIndex, cell }
cell-dblclick	当某个单元格被双击击时会触发该事件	data: { event, column, columnIndex, row, rowIndex, cell }
cell-contextmenu	当某个单元格被鼠标右键点击时会触发该事件	data: { event, column, columnIndex, row, rowIndex, cell }
expand-change	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	data: { row, expandedRows }
box-selection	当selection选中区域的时候触发该事件	data: { areas: area[], cells: [] }