Table 表格

用于展示多条结构化数据。

基础用法

基础的表格展示用法。

当 fyo-table 元素中注入 data 对象数组后，在 fyo-table-column 中用 prop 属性来对应对象中的键名即可填入数据，用 label 属性来定义表格的列名。

带斑马纹表格

使用带斑马纹的表格，可以更容易区分出不同行的数据。

stripe 属性可以创建带斑马纹的表格。

带边框表格

默认情况下，Table 组件是不带边框的，如果需要，可以使用 border 属性，它会带有纵向边框。

固定表头

纵向内容过多时，可选择固定表头。

只要在 fyo-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。

多选

选择多行数据。

实现多选非常简单: 手动添加一个 fyo-table-column，设 type 属性为 selection 即可。

排序

对表格进行排序。

在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。

自定义列模板

自定义列的显示内容，可组合其他组件使用。

通过 default 插槽可以获取到 row, column, $index 的数据，来自定义表格列的内容。

Table 属性

属性名	说明	类型	默认值
data	显示的数据	array	[]
stripe	是否为斑马纹 table	boolean	false
border	是否带有纵向边框	boolean	false
size	Table 的尺寸	string	default
fit	列的宽度是否自撑开	boolean	true
show-header	是否显示表头	boolean	true
highlight-current-row	是否要高亮当前行	boolean	false
empty-text	空数据时显示的文本内容	string	No Data
height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	string / number	—
max-height	Table 的最大高度。合法的值为数字或者单位为 px 的高度。	string / number	—
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	Function({row, rowIndex}) / String	—

Table 事件

事件名	说明	参数
selection-change	当选择项发生变化时会触发该事件	selection
sort-change	当表格的排序条件发生变化的时候会触发该事件	'{ column, prop, order }'
row-click	当某一行被点击时会触发该事件	row, column, event
current-change	当表格的当前行发生变化的时候会触发该事件	currentRow, oldCurrentRow

TableColumn 属性

属性名	说明	类型	默认值
label	显示的标题	string	—
prop	对应列内容的字段名	string	—
width	对应列的宽度	string / number	—
min-width	对应列的最小宽度	string / number	—
align	对齐方式	string	left
header-align	表头对齐方式	string	—
type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）	string	—
sortable	对应列是否可以排序	boolean	false

Table Slot

插槽名	说明
default	默认插槽，用于放置 Table-Column
empty	当数据为空时自定义的内容

TableColumn Slot

插槽名	说明
default	自定义列的内容，参数为 '{ row, column, $index }'
header	自定义表头的内容，参数为 '{ column, $index }'