Table 表格

概述

主要用于展示大量结构化数据。
支持行排序、列过滤器、自定义列样式、自定义行样式、自定义单元样式、列操作、列内容为组件、树形数据、聚合表头、等复杂功能。

代码示例

API

Table Functions

this.$refs.table.getSelected()

Table Props

属性	说明	类型	默认值
data	数据源	Array	[]
border	是否有外边框和内边框	Boolean	false
trClass	通过function(trData，index)设置行样式，返回内容会作为行的class	Function	undefined
noDataText	配置无数据时的提示，未空则不提示	String	undefined

Table Events

事件名	说明	参数
on-th-click	点击列头部时触发	(col, colIndex, event)
on-tr-click	点击一行时触发	(trData, index, event)
on-td-click	点击td时触发	(trData, tdData, index, event)
on-expand-hide	更多关闭时触发	(trData, index, event)
on-expand-show	更多开展时触发	(trData, index, event)
on-select	勾选或者取消勾选一行时触发	(trData, index, selected)
on-select-all	勾选或者取消勾选全选按钮时触发	选中数据 [trData, trData]

Column Props

属性	说明	类型	默认值
prop	列的唯一标识，对应着数据源对象的属性	String	null
name	列的标题	String	null
index	列的顺序索引，动态改变列时，所有列从左向右依次递增显示	Number	0
align	列文字对齐方向，可选值有"left"、"center"、"right"	String	center
width	列的宽度，传入"200px"或者"10%"	String	null
classes	控制TD的样式，当是function时，入参是td的原始值，返回结果必须是string	String|Function	null
sort	列是否可以排序	Boolean	false
filter	列的过滤器，把原始值转换成展示需要的内容	Array|Function	null
action	配置按钮列，当前列只显示按钮	Array|Object	null
component	配置子组件列, 参数为trData, tdData	Function	null
detailComponent	配置单元格详情，参数为trData, tdData	Function	null
type	列类型，可选值有expand、selection	String	null
disabled	设置列禁止被选中，只有列的type是selection时有效	Function	null
editable	配置编辑列	Object	null