Table 表格

展示行列数据。

Table

Props

Prop NameTypeRequiredDefaultDescription
pagination
object
{}
分页组件的配置,传入null为隐藏分页
dataSource
array
[]
数据源
columns
array
[]
表列信息,具体属性参考 columns 事例
columnPlaceholder
bool
启用后会创建一个无宽度的空列,用作宽度占位,占位后宽度溢出便不会导致表格列被压缩,多出的宽度会被空列占用。 占位列 column.key 为 table\_column\_width\_placeholder,使用中需注意避免重复 key
defaultColumnConfig
object
{}
表列配置项,非受控
onColumnConfigChange
func
() => {}
表列配置修改回调
expandedRowRender
func
额外表信息渲染
expandIconAsCell
bool
额外表展开按钮是否独立占据一格,data有children时有效
expandIconColumnIndex
number
展开按钮的塞入的column index,expandIconAsCell为false时生效
hideExpandIcon
bool
隐藏扩展列按钮
defaultExpandedRowKeys
array
默认展开项,非受控
expandedRowKeys
array
展开项,受控
defaultExpandAllRows
bool
是否默认展开所有列
onExpandedRowsChange
func
展开事件
onExpand
func
展开按钮点击事件
onRow
func
设置行props
@argument
行数据
@argument
行当前翻页中的index 不可作为key使用 不建议使用
onHeaderRow
func
设置表头props
@argument
行数据
@argument
表头行的index 表示存在分组时(column.children)的表头层级
rowSelection
union
列表可选选项配置. column.key 为 table\_row\_selection,使用中需注意避免重复 key
dragSorting
union
拖拽排序
onRowSelect
func
列表选项变化回调
@deprecated
请使用rowSelection.onChange来替换
showHeader
bool
是否显示表头
columnResizable
bool
是否可拖拽调节表格列大小
title
func
头部内容
footer
func
底部内容
emptyContent
node
无数据时的展示内容
errorContent
node
报错信息
handleSearch
func
(record, searchValue) => { return _.map(record).join('').indexOf(searchValue) >= 0; }
如何搜索
customStyle
shape
{}
自定义样式
scroll
shape
滚动配置
tableLayout
enum
表格布局,当 scroll.x 有值时为 fixed,其它时候默认为 auto,可自行覆盖
rowKey
union
'key'
定义如何获取每行的键值
zebraCrossing
bool
是否有斑马线,存在子表格时,斑马线样式可能会错乱
components
shape
自定义表格组件,慎用
defaultOrder
shape
默认排序设置,key 为 column key,state 为升序(asc)或降序(desc)
order
shape
受控排序设置,key 为 column key,state 为升序(asc)或降序(desc)
onConditionChange
func
表格的筛选等条件变更时的回调
@param
变更的数据
@param
排序
@param
筛选
@param
搜索
doNotHandleCondition
bool
order、filter、searchValue、pagination变化时表格内部不处理
contextMenu
func
右键菜单
@param
该行的记录值

说明

  • Table 表格组件,通过传入 column 和 dataSource 来快速生成表格,内置搜索、滚动、表格列固定等功能。
  • 为了确保数据的准确性请务必保证每条数据存在有效不重复的 key 或者使用 rowKey 来指定 key 的获取方式,表格中将会依照 key 来进行选择等操作。不传入将会使用数据在每一页中的 index 来作为 key,可能会造成 key 重复而导致错误,甚至造成各种奇怪的错误现象。
  • rowKey 支持函数,第二个参数为 record 在当前页面的 index,强烈不推荐使用!!!请务必注意。

演示

属性调试

VIEW CODE ( LIVE )

基本使用

VIEW CODE ( LIVE )

columns - 表格列属性定义

VIEW CODE ( LIVE )

emptyContent - 自定义空表格提示

VIEW CODE ( LIVE )

errorContent - 报错提示内容

VIEW CODE ( LIVE )

scroll - 滚动定义

VIEW CODE ( LIVE )

title - 自定义表格顶部内容

VIEW CODE ( LIVE )
VIEW CODE ( LIVE )

pagination - 自定义分页设置

VIEW CODE ( LIVE )

rowKey - 定义 key 的获取

VIEW CODE ( LIVE )

contextMenu - 右键菜单

VIEW CODE ( LIVE )

filter - 筛选

VIEW CODE ( LIVE )

order - 排序

VIEW CODE ( LIVE )

expandedRowRender - 扩展内容渲染

VIEW CODE ( LIVE )

hideExpandIcon - 隐藏扩展列展开按钮

VIEW CODE ( LIVE )

expandedRowKeys - 展开列

VIEW CODE ( LIVE )

defaultExpandAllRows - 默认展开扩展列

使用时务必注意 rowKey 的使用,使用此属性可能会影响到表格的性能

VIEW CODE ( LIVE )

onRow - 设置行 props

VIEW CODE ( LIVE )

onHeaderRow - 设置表头 props

VIEW CODE ( LIVE )

rowSelection - 列选择配置

VIEW CODE ( LIVE )

dragSorting - 列选择配置

VIEW CODE ( LIVE )

fixed - 固定表头、列

VIEW CODE ( LIVE )

columnResizable - 可调表头大小

需要在回调中自行控制 column width

VIEW CODE ( LIVE )

列分组

VIEW CODE ( LIVE )

子表格

VIEW CODE ( LIVE )

onConditionChange - 由于 pagination 的某些设计,onConditionChange 返回值中不包含 pagination 变化,要监听 pagination 请使用 pagination 参数

VIEW CODE ( LIVE )

doNotHandleCondition - 自行处理筛选等逻辑

VIEW CODE ( LIVE )

远程加载数据

VIEW CODE ( LIVE )

后端分页、搜索、筛选、排序

VIEW CODE ( LIVE )

popupContainer - 弹出层容器

VIEW CODE ( LIVE )

单元格合并

VIEW CODE ( LIVE )

demo - 样例演示

VIEW CODE ( LIVE )

ActionList

Props

说明

  • ActionList 已经抽离为外层组件,请使用 ActionList 替换 Table.ActionList

演示

演示

VIEW CODE ( LIVE )

ColumnConfigButton

Props

Prop NameTypeRequiredDefaultDescription
modalProps
object
弹窗的props

说明

  • 这是 ColumnConfigButton 表头配置弹窗按钮
  • 使用 context 和 table 通信,所以需要嵌入到 table 中才起作用(title,footer)

演示

columnConfigButton

VIEW CODE ( LIVE )

modalProps - 弹窗自定义 props 设置

VIEW CODE ( LIVE )

HoverDisplayArea

Props

Prop NameTypeRequiredDefaultDescription

说明

  • 用于表单列中 hover 时才展示的元素,为了防止 hover 时宽度变化导致抖动,使用 visibility 来控制隐藏。

演示

HoverDisplayArea

VIEW CODE ( LIVE )

SearchInput

Props

说明

  • 这是 SearchInput 表格搜索框
  • 使用 context 和 table 通信,所以需要嵌入到 table 中才起作用(title,footer)
  • 自定义搜索配合 Table.handleSearch 使用
  • 支持所有 Input 的 props

演示

searchInput - 演示

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司