tgg-table-scroll

项目内部有个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}
/>