Table 表格 ​

如何使用 ​

往 Table 传入表头 columns 和数据 dataSource 进行渲染。

请为 dataSource 中的每个数据项提供一个与其他数据项值不同的 key，或者使用 rowKey 参数指定一个作为主键的属性名，表格的行选择、展开等绝大多数行操作功能都会使用到。

基本表格 ​

对于表格，最基本的两个参数为 dataSource 和 columns，前者为数据项，后者为每列的配置，二者皆为数组类型。

空表格 ​

边框和斑马线条纹 ​

设置border 和 stripe 开启 边框和斑马线条纹

对齐方式 ​

设置 colum 的 align 属性,可选 'left' | 'center' | 'right'

自定义行属性 ​

如果你想给行增加一些属性或者事件处理器，使用 row-props 属性。

过滤和排序 ​

设置 sorter , filter 和filterOption

选中行 ​

可以通过把第一列的类型设为 rowSelection 来让行变成可选的。

注意: 必须传入rowKey或者dataSource对象中提供key属性

受控选中行 ​

固定头部 ​

在展示大量数据的时候通过设定 max-height 来固定头部、滚动数据。

固定头部和列 ​

注意：如果设定了固定的列，你需要同时设定 scroll-x。

自定义渲染样式 ​

想要之定义渲染样式可以使用row-props 和 cell-props

自定义内容 ​

自定义头部 ​

title 可以是 string 或者 ()=>VNodeChild

可编辑 ​

点击文字可编辑

jsx 写法 ​

如果你使用 jsx ,将获得更加灵活的书写体验,可以不用写繁琐的 h 函数

template 写法 ​

这个只是一个描述 columns 的语法糖，所以你不能用其他组件去包裹 Column

省略 ​

省略的前提是要 table-layout 为 fixed,

table-layout 在 设置 max-height 或者 scroll-x 属性时,自动会为 true