@beisen-phoenix/table

| 参数 | 说明 | 类型 | 默认值 | 是否必传 | 备注 | | --- | --- | :---: | :---: | :---: | --- | | className | 扩展className | string | phoenix-table | 否 | | | bordered | 是否显示外边框 | boolean | false | 否 | | | columnHighlight | 单击列，整列高亮效果 | boolean | true | 否 | | | rowsInView | 单次render的最大行数 | number | 0 | 否 | 单次render的最大行数。Table 采用了lazy render的方式来优化在大量数据下的性能，如果你的表格显示的高度超出了20条，可以调整rowsInView的值。为0表示禁用懒加载。 | | rowKey | 生成每一项key的辅助方法 | function(obj) 或 string | true | 0 | 否 | 为 true 时，以数据项本身作为key，相当于 (d => d)；为函数时，使用此函数返回值；为string时，使用这个string对应的数据值。如 'id'，相当于 (d => d.id)。 | | hover | 是否数据行鼠标悬浮高亮效果 | boolean | true | 否 | | | size | 尺寸(作用于行高)， 可填值 ['large', 'middle', 'small'] | string | 'middle' | 否 | | | striped | 是否显示交错斑马底纹 | string 或 ReactNode | false | 否 | | | useContainerScroll | 是否使用容器的滚动条 | boolean | false | 否 | 开启后，头部不会锁定 | | height | 表格高度 | number | - | 否 | 开启后，头部不会锁定 | | loading | 数据加载中，为true时会展示一个默认的小菊花组件，可以传入一个自定义的Spin代替 | bool 或 ReactNode | false | 否 | | | loadingView | 自定义的Loaidng组件 | ReactNode | false | 否 | 可以通过传递给loadiView一个自定义组件覆盖默认的空视图 | | emptyView | 空数据效果| ReactNode | 无 | 否 | 可以通过传递给emptyView一个自定义组件覆盖默认的空视图 | | enableWheelScroll | 是否启用touch滚动 | boolean | true | 否 | 默认支持滚动条以及touch滚动，可禁用touch滚动 | | columns | 数组，见Column | Column[] | - | 是 | | | columnResizable | 列宽是否可拖拽宽度，默认为true，如果想禁用某列拖拽宽度，可以给单独列设置columnResizable | boolean | true | 否 | | | columnDefaultWidth | 默认列宽的宽度，仅在未设置列宽的场景下生效。默认为140，如果认为140过大，可以自定义设置，但是为了体验，建议不小于56. | boolean | 140 | 否 | 强烈建议此值设置不小于56 | | sorter | 表格统一排序函数，参数分别为 Column.sorter 和 排序方式 | func | 无 | 否 | 强烈建议此值设置不小于56 | | fit | 是否启用列宽自适应 | boolean | true | 否 | 当为true，会自适应宽度; 为false,会可以单独设置宽度，并且不随浏览器窗口大小改变调整 | | ellipsis | 内容超过单元格宽度是否显示...,默认为false，也就是会换行 | boolean | false | 否 | 强烈建议不要设置为true，会导致性能问题(数据量过大) | | fixed | 滚动条显示设置，可填值 ['both', 'x', 'y'] | string | 'both' | 否 | 如果确定不会出现x轴滚动条，可以设置为 y,其他情况类似，无特殊需求，不建议调整 | | expandKeys | 展开的行的key数组 | array | [] | 否 | | | expandedRowRender | 展开的行内容 | function | 无 | 否 | 如果是可展开，此项是必填 | | dataSource | 数据源 | object[] | 无 | 是 | | | pagination | 分页配置，参考下面pagination | object | pagination: { current: 1, pageSize: 15, }, | 是 | | | settingPanel | 表格设置，参考下面settingPanel | object | pagination: { current: 1, pageSize: 15, }, | 是 | | | rowSelection | 表格选中设置，参考下面rowSelection | object | {} | 否 | |

Usage no npm install needed!

<script type="module">
  import beisenPhoenixTable from 'https://cdn.skypack.dev/@beisen-phoenix/table';
</script>

README

API

Table

参数 说明 类型 默认值 是否必传 备注
className 扩展className string phoenix-table 否
bordered 是否显示外边框 boolean false 否
columnHighlight 单击列，整列高亮效果 boolean true 否
rowsInView 单次render的最大行数 number 0 否 单次render的最大行数。Table 采用了lazy render的方式来优化在大量数据下的性能，如果你的表格显示的高度超出了20条，可以调整rowsInView的值。为0表示禁用懒加载。
rowKey 生成每一项key的辅助方法 function(obj) 或 string true 0 否
hover 是否数据行鼠标悬浮高亮效果 boolean true 否
size 尺寸(作用于行高)， 可填值 ['large', 'middle', 'small'] string 'middle' 否
striped 是否显示交错斑马底纹 string 或 ReactNode false 否
useContainerScroll 是否使用容器的滚动条 boolean false 否 开启后，头部不会锁定
height 表格高度 number - 否 开启后，头部不会锁定
loading 数据加载中，为true时会展示一个默认的小菊花组件，可以传入一个自定义的Spin代替 bool 或 ReactNode false 否
loadingView 自定义的Loaidng组件 ReactNode false 否 可以通过传递给loadiView一个自定义组件覆盖默认的空视图
emptyView 空数据效果 ReactNode 无 否 可以通过传递给emptyView一个自定义组件覆盖默认的空视图
enableWheelScroll 是否启用touch滚动 boolean true 否 默认支持滚动条以及touch滚动，可禁用touch滚动
columns 数组，见Column Column[] - 是
columnResizable 列宽是否可拖拽宽度，默认为true，如果想禁用某列拖拽宽度，可以给单独列设置columnResizable boolean true 否
columnDefaultWidth 默认列宽的宽度，仅在未设置列宽的场景下生效。默认为140，如果认为140过大，可以自定义设置，但是为了体验，建议不小于56. boolean 140 否 强烈建议此值设置不小于56
sorter 表格统一排序函数，参数分别为 Column.sorter 和 排序方式 func 无 否 强烈建议此值设置不小于56
fit 是否启用列宽自适应 boolean true 否 当为true，会自适应宽度; 为false,会可以单独设置宽度，并且不随浏览器窗口大小改变调整
ellipsis 内容超过单元格宽度是否显示...,默认为false，也就是会换行 boolean false 否 强烈建议不要设置为true，会导致性能问题(数据量过大)
fixed 滚动条显示设置，可填值 ['both', 'x', 'y'] string 'both' 否 如果确定不会出现x轴滚动条，可以设置为 y,其他情况类似，无特殊需求，不建议调整
expandKeys 展开的行的key数组 array [] 否
expandedRowRender 展开的行内容 function 无 否 如果是可展开，此项是必填
dataSource 数据源 object[] 无 是
pagination 分页配置，参考下面pagination object pagination: { current: 1, pageSize: 15, }, 是
settingPanel 表格设置，参考下面settingPanel object pagination: { current: 1, pageSize: 15, }, 是
rowSelection 表格选中设置，参考下面rowSelection object {} 否

pagination

参数 说明 类型 默认值 是否必传 备注
current 当前页数 number 1 是
total 总数 number - 是
pageSize 每页显示条数 number 15 是
capacityOptions 显示条数配置 number[] [15, 30, 60, 100] 否
showSelectCount 底部是否显示'已选中N条'文本 boolean true 否
showSelectAllPageCheckbox 底部是否显示跨页全选 boolean false 否
selectAllPageCheckbox 底部跨页全选是否选中 boolean false 否
onChange 当前页数、每页显示条数发生变化回调时间 function - 否
  • 其他参考pagination组件

rowSelection

参数 说明 类型 默认值 是否必传 备注
type 多选或者单选, 可选值 'multiple', 'single' string 无 是
disabledAllCheckbox 禁用头部全选复选框 boolean - 否
selectedRowKeys 默认选中项，根据rowKey进行匹配 string[] [] 是
onChange 选中项发生变化回调时间 function 无 否

columns

参数 说明 类型 默认值 是否必传 备注
align 单元格内容排布方式，可选 ['left', 'center', 'right'] string 'left' 否
fixed 锁定列，可选['left', 'right']， string - 否 如果相邻的多列需要锁定，只需指定最外侧的column即可
key 列的key，默认使用index string | number - 否
render 表格内容生成函数； function 无 否 d: 当前行数据i: 当前行索引为了使用方便，可以传入一个数据的key，如 'id'，相当于 (d) => { return d.id }
dataIndex 列数据在数据项中对应的 key string - 是
title 列头显示文字 string | ReactNode - 否
width 列宽 number 140 否