antdUI的table表格的表头出现滚动条

#1

image
2
99
渲染表格的函数

 renderTable() {
    const { listData } = this.state
    return (
      <Table
        rowKey={'msgId'}
        scroll={{ y: 600 }}
        columns={this.columns}
        dataSource={listData}
        pagination={this.state.paginationOption}
      />
    )
  }

数据

this.columns = [
      {
        dataIndex: 'infoName',
        title: '服务器名称',
        width: 150,
        align: 'center'
      },
      {
        dataIndex: 'fwqWhere',
        title: '服务器来源',
        width: 120,
        align: 'center'
      },
      {
        dataIndex: 'typeName',
        title: '服务名',
        width: 120,
        align: 'center'
      },
      {
        dataIndex: 'msgId',
        title: '基本信息id',
        width: 150,
        align: 'center'
      },
      {
        dataIndex: 'port',
        title: '端口',
        width: 120,
        align: 'center'
      },
      {
        dataIndex: 'typeType',
        title: '服务类别',
        width: 150,
        align: 'center'
      },
      {
        dataIndex: 'createTime',
        title: '基本信息创建时间',
        width: 150,
        align: 'center'
      },
      {
        dataIndex: 'action',
        title: '操作',
        render: this.actionRender,
        align: 'center'
      }
    ]
  }
#3

我对比了antd官网例子,table头部div多了ant-table-hide-scrollbar这个类,这个类上有下面两个样式。
我把样式直接加到head的div上就好了
.ant-table-header{scrollbar-color:transparent transparent}
.ant-table-header::-webkit-scrollbar{background-color:transparent}

1 Like
#4

都是引用了同样的库,这是为什么呢

#5

确实可以,已采纳。