react antd 表格头固定

最新推荐文章于 2023-11-02 10:39:51 发布

web_cgh

最新推荐文章于 2023-11-02 10:39:51 发布

阅读量1.3k

点赞数

分类专栏： antd React 文章标签： react

本文链接：https://blog.csdn.net/web_cgh/article/details/125692423

版权

React 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

antd

8 篇文章 0 订阅

订阅专栏

import { Table } from 'antd';
import React, { Component } from 'react';
import FormSearch from './FormSearch'
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        width: 150,
    },
    {
        title: 'Age',
        dataIndex: 'age',
        width: 150,
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
    {
        title: 'Address1',
        dataIndex: 'address1',
    },
    {
        title: 'Address2',
        dataIndex: 'address2',
    },
    {
        title: 'Address3',
        dataIndex: 'address3',
    },
    {
        title: 'Address4',
        dataIndex: 'address4',
    },
    {
        title: 'Address5',
        dataIndex: 'address5',
    },
    {
        title: 'Address6',
        dataIndex: 'address6',
    },
];


class FixedHeadTable extends Component {
    constructor() {
        super();
        this.state = {
            data: []
        }
    }
    componentDidMount() {
        const data = [];

        for (let i = 0; i < 100; i++) {
            data.push({
                key: i,
                name: `Edward King ${i}`,
                age: 32,
                address: `London, Park Lane no. ${i}`,
                address1: `London, Park Lane no. ${i}`,
                address2: `London, Park Lane no. ${i}`,
                address3: `London, Park Lane no. ${i}`,
                address4: `London, Park Lane no. ${i}`,
                address5: `London, Park Lane no. ${i}`,
                address6: `London, Park Lane no. ${i}`,
            });
        }
        this.setState({ data })
    }
    render() {
        return (
            <div>
                <FormSearch />
                <Table
                    columns={columns}
                    dataSource={this.state.data} pagination={false}
                    // pagination={{
                    //   pageSize: 50,
                    // }}
                    scroll={{
                        y: 240,
                        x: 2040,
                    }}
                />
            </div>
        )
    }
};

export default FixedHeadTable;