table滚动组件(react)
项目内部有个table的滚动需求， 于是封装了一个，方便以后再用，语言是react
Install# With npm
npm install tgg-table-scroll
# With yarn
yarn add tgg-table-scroll
Props
props目前有4个: width, height, columns, data,
| API | 说明 | 必填 | 类型 | 默认值 |
|---|---|---|---|---|
| width | 组件的宽度 |
false | string | '100%' |
| height | 组件的高度 |
false | number | 250 |
| listItemHeight | listItem高度 |
false | number | 50 |
| columns | 表格列的配置 |
false | ColumnsType[] | - |
| data | 数据数组 |
false | object[] | - |
| handleHover | hover事件回调key |
false | Function | - |
| currentTopIndex | 回调顶部listItem key |
false | Function | - |
ColumnsType[]
列配置项是固定的，目前必传字段 name 和 width
| API | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 列名称 |
string | - |
| width | 列的宽度 |
string | - |
const columns: ColumnsType = [
{ name: '排名', width: '20%' },
{ name: '平台名称', width: '50%' },
{ name: '综合指数, width: '30%' },
]
Data[]
数据配置项【不是固定的字段】，用户可根据自己业务的需求，【随意传入】需要的字段，代码内部做了遍历，列项将全部渲染出来，以下是个示例:
| API | 说明 | 类型 | 默认值 |
|---|---|---|---|
| order | 排名 |
string | |
| platName | 平台名称 |
string | - |
| cpIndex | 综合指数 |
string | - |
const columns: ColumnsType = [
{ order:1 platName:'mockData1111111',cpIndex:'0.4857' },
{ order:2 platName:'mockData2222222',cpIndex:'0.3956' },
{ order:3 platName:'mockData3333333',cpIndex:'0.3615' },
{ order:4 platName:'mockData4444444',cpIndex:'0.4857' },
{ order:5 platName:'mockData5555555',cpIndex:'0.3165' },
{ order:6 platName:'mockData6666666',cpIndex:'0.517' },
{ order:7 platName:'mockData7777777',cpIndex:'0.6111 },
{ order:8 platName:'mockData8888888',cpIndex:'0.3591' },
{ order:9 platName:'mockData9999999',cpIndex:'0.2166' },
]
引用示例
<TggTableScroll
width="60%"
height={250}
listItemHeight={50}
columns={columns}
data={addKey(shortParkList)}
handleHover={handleHover}
currentTopIndex={currentTopIndex}
clickHandler={clickHandler}
/>
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
