Table 表格

根据表头字段展示数据，支持固定表头、选择和排序。nvue 专用版本见 TableWeex 表格。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 表格 -->
<fui-table :header="columns" :itemList="rows" />

页面可定义 columns 为 [{ label: '姓名', prop: 'name', width: 200 }]，rows 为 [{ name: '张三' }]。prop 对应行对象字段。

属性

尺寸单位为 rpx。

属性	类型	说明	官网默认值
header	Array	表头配置，必填	[]
show	Boolean	是否显示表头	true
size	Number / String	表头字号	28
color	String	表头文字颜色	#7F7F7F
fontWeight	Number / String	表头字重	600
headerBgColor	String	表头背景色	#fff
fixed	Boolean	是否固定表头，需设置高度	false
itemList	Array	表格行数据	[]
full	Boolean	表格较窄时是否填满剩余宽度	false
height	Number / String	表格高度，0 为自动	0
gap	Number / String	容器左右内边距	0
border	Boolean	是否显示竖向边框	true
horBorder	Boolean	是否显示横向边框	true
borderColor	String	边框颜色	#eee
background	String	表格背景色	#fff
stripe	Boolean	是否显示斑马纹	false
stripeColor	String	斑马纹颜色	#F8F8F8
textSize	Number / String	内容字号	28
textColor	String	内容文字颜色	#333
align	String	单元格对齐：left、center、right	center
ellipsis	Boolean	超出时是否省略，默认换行	false
padding	Number / String	单元格上下内边距	20
selection	Boolean	是否允许多选	false
initEmitChange	Boolean	初始化时是否触发选中变化	false
checkboxColor	String	选中框背景色	#465CFF
checkboxBorderColor	String	未选中边框色	#eee
checkmarkColor	String	对勾颜色	#fff
emptyText	String	空数据提示，空字符串不显示	暂无数据
emptySize	Number / String	空提示字号	24
emptyColor	String	空提示颜色	#B2B2B2

事件

事件	说明	回调参数
click	点击表头配置的操作按钮	{ index, item, buttonIndex }
rowClick	点击数据行	{ index, item }
select	勾选某行	{ index, item, is_selected }
selectAll	勾选全选	{ is_selected }
selectionChange	选中项变化	选中数据数组
sortChange	排序变化	{ itemList, sort, prop }
scrolltolower	固定高度的表格滚动到底部	滚动事件详情
tdClick	点击单元格	{ rowIndex, tdIndex, prop }

官网 V2.5 列出了 tdClick，当前本地 fui-table 未声明或触发该事件。存在固定列时不应使用透明背景。

方法

组件实例提供 columnColorMethod(fn, prop)、clearSelection()、toggleRowSelection(row, selected)、toggleRowDisabled(row, disabled)、toggleAllSelection()、resetSort() 和 setSort(prop, sortOrder)；排序方向为 ascending 或 descending。

插槽

插槽	说明
—	官网未列出该组件的插槽