跳转到内容
返回

antd表格组件扩展行

开头

问题描述

步骤

需要的api

思路说明

代码

import React, { useState } from 'react'
import { Table, Button } from 'antd'
import './main.css'

const Main = () => {
    const [openKeys, setOpenKeys] = useState([])
    const handleOpenRow = (id) => {
        let index = openKeys.indexOf(id)
        if (index === -1) {
            setOpenKeys(() => {
                return [...openKeys, id]
            })
        } else {
            const arr = openKeys
            arr.splice(index, 1)
            setOpenKeys(() => {
                return [...arr]
            })
        }

    }
    const columns = [
        {
            title: 'ID',
            align: 'center',
            dataIndex: 'key',
        },
        {
            title: '姓名',
            align: 'center',
            dataIndex: 'name',
        }, {
            title: "操作",
            align: 'center',
            render: (row) => {
                return (
                    <Button type="link" onClick={() => handleOpenRow(row.key)}>
                        {
                            openKeys.indexOf(row.key) === -1 ? '展开' : '收起'
                        }
                    </Button>
                )
            }
        }
    ]
    const tableData = [{
        key: '1',
        name: "one",
        sex: "man"
    },
    {
        key: '2',
        name: 'two',
        sex: "man"
    }]
    return (
         <div className="container">
            <Table columns={columns} dataSource={tableData}
                // 开启扩展行
                expandable={{
                    // 定义扩展行内容
                    expandedRowRender: record => {
                        return <p>sex:{record.sex}</p>
                    },
                    // 自定义按钮图标
                    expandIcon: _ => '',
                    // 定义哪些行开启
                    expandedRowKeys: openKeys
                }}
            />
        </div>
    )
}
export default Main


上一篇
软件著作权申请
下一篇
搭建图床服务器