Ant-Table查看详情

效果图

JS

import {
    useState, useEffect, useRef } from 'react'
import styles from './style.less'
import {
    Table, Space } from 'antd';

const dataSource = [

    {
   
        name: '羽神',
        grade: '优',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 1
    },
    {
   
        name: '二帝天下无敌',
        grade: '优',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 2
    },
    {
   
        name: '关羽',
        grade: '差',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 3
    },
    {
   
        name: '羽神',
        grade: '良',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 4
    },
    {
   
        name: '羽神',
        grade: '差',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 5
    },
    {
   
        name: '羽神',
        grade: '差',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 6
    },
    {
   
        name: '羽神',
        grade: '查',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 7
    },
    {
   
        name: '羽神',
        grade: '良',
        time: '2022-5-13 2022-5-18',
        detail: `我要穿越这片沙漠

        找寻真的自我
        
        身边只有一匹骆驼陪我
        
        这片风儿吹过
        
        那片云儿飘过
        
        突然之间出现爱的小河
        
        我跨上沙漠之舟
        
        背上烟斗和沙漏
        
        手里还握着一壶烈酒
        
        漫长古道悠悠
        
        说不尽喜怒哀愁
        
        只有那骆驼奔忙依旧
        
        什么鬼魅传说
        
        什么魑魅魍魉妖魔`,
        key: 8
    },
    {
   
        name: '羽神',
        grade: '高',
        time: '2022-5-13 2022-5-18',
        detail: '我跨过沙漠之舟 背上烟盒啥都 一匹骆驼',
        key: 9
    },

];

const contentStyle = {
   
    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
};

const index = () =>
{
   
    const [timer, setTimer] = useState(null),  // 定时器
        [tableData, setTableData] = useState([]),  // table 数据
        [tableWarpHeight, setTableWarpHeight] = useState(0),  // table容器 高度
        [tableHeadHeight, setTableHeadHeight] = useState(0),  // table头部高度
        [isShow, setIsShow] = useState(true),  // 显示 Dom
        [cardData, setCardData