fes.js/packages/fes-doc/docs/ui/table.md

pageClass
comp-page-class

Table 表格

概述

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

代码示例

表格的最简单用法。name表示列名，prop对应数据对象的属性

过滤器 filter 可以是 Function 或者 Array

当 filter 是 Function 时，用函数执行结果替换td显示的原始内容。

当 filter 是 Array 时，用初始值匹配数组中的value, 找出对应的text替换显示。

当渲染 tbody 时，给 tr 添加上row_$index样式，当渲染 tr 时，给 td 添加上col_$index样式。自定义row_$index和col_$index则可以给对应的列和行添加样式

给Column设置 classes 属性能给 td 添加个性化样式, classes可以配置为 String 或者 Function。当是Function时，返回结果应该是一个class

给Column设置 align 属性能控制当前列文字朝向

给Column设置 width 属性能控制当前列宽度

给Column设置sort属性，则当前列支持排序，排序按照大小排序

给Column设置action属性，则当前列显示功能按钮

函数的this指向当前作用域，参数为(trData, event)

给Column设置component属性，则会用子组件替换td的内容

函数的this指向当前作用域，参数为(trData, tdData, event)

支持配置单元格可编辑,通过为Column配置editable来控制列是否可编辑，可用配置：

type: 'input', 说明： 单元格编辑组件类型，仅支持input，select

multiple: false, 说明： 仅type为select时有效，提供多选

multipleLimit: 1, 说明： 多选限制

confirm: true, 说明： 是否提示修改，默认显示

validate: () => {return true}, 说明： 触发change前校验，默认不校验

change: () => {} 说明： change 确认修改触发change回调

通过在组件实例上调用getSelected能拿到选中的行。

给列设置disabled，可以控制此行是否可以被选中

{{ props.name }} {{ props.age }}

当页面放不下一行数据时，采用展开显示详情的方式

针对每个数据单元格，可以展开更多

当时聚合表头时，建议设置table为border，带边框样式

TreeTable继承于Table，多了tree的特性，需要传入树状结构数据

切换姓名列

可以通过给column配置index属性控制列相对位置

设置noDataText，则当表格无数据时给于提示

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