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] = useState(null)  // card 数据

    const tableWarpRef = useRef()
    // 表格滚动
    useEffect(() =>
    {
        let tabHeight = tableWarpRef.current.clientHeight  // 获取表格容器的高度
        const tableHead = document.querySelector("#cyclicScroll .ant-table-thead").clientHeight;  // 获取表格头部的高度
        InitialScroll()  // 开启滚动
        setTableWarpHeight(tabHeight)  // 包裹高度
        setTableHeadHeight(tableHead)  // 表格高度
        return () =>
        {
            clearInterval(timer)
        }
    }, [])
    // 获取数据
    useEffect(() =>
    {
        getData()
    }, [])
    const getData = () =>
    {
        let REQUEST_url = ``
        fetch(REQUEST_url)
            .then((response) => response.json())
            .then((responseJson) =>
            {
                console.log(responseJson);
                setTableData(responseJson?.data)
            }, error =>
            {
                console.warn(error);
            })
    }
    const InitialScroll = () =>
    {
        let v = document.getElementsByClassName("ant-table-body")[0];
        let time = setInterval(() =>
        {
            v.scrollTop += 1.5;
            if (Math.ceil(v.scrollTop) >= parseFloat(v.scrollHeight - v.clientHeight))
            {
                v.scrollTop = 0
            }
        }, 100)
        setTimer(time)
    }
    const columns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: 60,
            render: text => <div title={text} className={styles.tableName} style={contentStyle}><a >{text}</a></div>,
        },
        {
            title: '等级',
            dataIndex: 'grade',
            key: 'grade',
            width: 60,
            render: text => <div title={text} className={styles.tableStatus} style={contentStyle}><div style={text === '优' ? { background: '#6de922' } : text === '良' ? { background: 'yellow' } : { background: '#F01E2A' }} className={styles.status} ></div ><span className={styles.statusSpan}>{text}</span></div>,
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            render: text => <div title={text} style={contentStyle}>{text}</div>
        },
        {
            title: '详情',
            dataIndex: 'detail',
            key: 'detail',
            render: text => <div title={text} style={contentStyle}>{text}</div>
        },
        {
            title: '操作',
            width: 80,
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { examine(record) }}>查看</a>
                </Space>
            ),
        },
    ];

    // 查看按钮
    const examine = (record) =>
    {
        setCardData(record)
        setIsShow(false)
    }
    const close = () =>
    {
        setIsShow(true)
    }
    const tableDOM = () =>
    {
        return (
            <div ref={tableWarpRef} onMouseEnter={() =>
            {
                if (timer) clearTimeout(timer);
                clearInterval(timer)
            }} onMouseLeave={() =>
            {
                if (timer) clearTimeout(timer);
                InitialScroll()
            }} className={styles.tableWarp}>
                {/* 宽度 - 头部高度 */}
                <Table id="cyclicScroll" scroll={{ y: tableWarpHeight - tableHeadHeight }} dataSource={dataSource} columns={columns} pagination={false} rowClassName={(_, index) => index % 2 === 0 ? styles.tdOdd : styles.tdEven} />
            </div>
        )
    }
    const cardDOM = () =>
    {
        console.log(cardData);
        return (
            <div className={styles.cardWarp} style={{ width: '100%', height: '100%' }}>
                <div className={styles.cardHead}>
                    <div className={styles.cardHeadWrapper}>
                        <div className={styles.cardHeadTitle}>我套你猴子</div>
                        <div className={styles.cardExtra}><a onClick={close}>关闭</a></div>
                    </div>
                </div>
                <div className={styles.cardCore}>
                    <div className={styles.itemList}>
                        <div className={styles.designation}>姓名</div>
                        <div className={styles.value}>{cardData.name}</div>
                    </div>
                    <div className={styles.itemList}>
                        <div className={styles.designation}>等级</div>
                        <div className={styles.value}>{cardData.grade}</div>
                    </div>
                    <div className={styles.itemList}>
                        <div className={styles.designation}>时间</div>
                        <div className={styles.value}>{cardData.time}</div>
                    </div>
                    <div className={styles.itemList}>
                        <div className={styles.designation}>详情</div>
                        <div className={styles.value}>{cardData.detail}</div>
                    </div>
                </div>
            </div>
        )
    }
    return (
        <div className={styles.container}>
            {isShow ? tableDOM() : cardDOM()}
        </div>
    );
};
export default index

CSS

.container {
  width: 500px;
  height: 200px;

  .tableWarp {
    width: 100%;
    height: 100%;

    // 名字
    .tableName {
      margin: 0 auto;
      width: 50px;
      height: 30px;
      border-radius: 2px;
      text-align: center;
      line-height: 30px;
      font-weight: bold;
      background-color: rgba(63, 63, 204, .3);
      font-size: 14px;
      overflow: hidden;
    }

    // 等级
    .tableStatus {
      display: flex;
      align-items: center;
      justify-content: center;

      .status {
        width: 6px;
        height: 6px;
        background: #6DE922;
        border-radius: 50%;
        margin-right: 5px;

        .statusSpan {
          font-size: 14px;
          font-weight: 400;
          color: #FFFFFF;
        }
      }

    }

    .tableDetail {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tdOdd,
    .tdEven {
      font-size: 12px;
      font-weight: 400;
      height: 34px;
    }

    .tdOdd {
      background: #103066;
      color: #FFFFFF;
    }

    .tdEven {
      background: #0D2954;
      color: #FFF2D6;
    }


  }

  //   卡片
  .cardWarp {
    width: 100%;
    height: 100%;
    border: 1px solid #f0f0f0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum', "tnum";
    position: relative;
    background: #fff;
    border-radius: 2px;

    .cardHead {
      min-height: 48px;
      margin-bottom: -1px;
      padding: 0 24px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      font-size: 16px;
      background: transparent;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 2px 2px 0 0;

      .cardHeadWrapper {
        display: flex;
        align-items: center;

        .cardHeadTitle {
          display: inline-block;
          flex: 1 1;
          padding: 16px 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .cardExtra {
          float: right;
          margin-left: auto;
          padding: 16px 0;
          color: rgba(0, 0, 0, 0.85);
          font-weight: normal;
          font-size: 14px;

          a {
            color: #1890ff;
            text-decoration: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
              color: #40a9ff;
            }
          }
        }
      }
    }

    // 内容
    .cardCore {
      padding: 24px;

      // flex
      .itemList {
        display: flex;
        align-items: center;

        // 分一份
        .designation {
          flex: 1;
        }

        // 剩下都是你的
        .value {
          flex: 9;
        }
      }
    }
  }

  :global {
    ::-webkit-scrollbar {
      // 改变滚动条宽度
      height: 5px;
      width: 7px;
      overflow-y: auto;
    }

    ::-webkit-scrollbar {
      // 隐藏进度条
      display: none;
      /* Chrome Safari */
    }

    // 头部
    .ant-table-thead>tr>th {
      background-color: rgba(13, 40, 84, 1) !important;
      height: 32px;
      font-size: 14px;
      font-weight: 400;
      color: #37B6FF;
      text-align: center;
      border-bottom: none;
    }

    // td
    .ant-table-tbody>tr>td {
      border-bottom: none;
      text-align: center;
    }

    .ant-table-thead>tr>th .ant-table-header-column {
      margin-left: 10px;
    }

    // 选中时的颜色
    .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-thead>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td,
    .ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td {
      background: none;
    }

    .ant-table-thead>tr>th,
    .ant-table-tbody>tr>td {
      padding: 0px !important;
    }

    .ant-table-placeholder {
      padding: 0px !important;
      background: none !important;
      border-top: none !important;
      border-bottom: none
    }

    // card start
    .ant-card-head-title {
      display: inline-block;
      flex: 1 1;
      /* padding: 16px 0; */
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}