Ant-Table样式初始化

效果图

JS

import { useState, useEffect } from 'react'
import styles from './style.less'
import { Table, Space, Popconfirm, message } 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([])
    // 表格滚动
    useEffect(() =>
    {
        InitialScroll()
        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: '操作',
            key: 'operating',
            width: 80,
            render: (text, record) => (
                <Space size="middle">
                    <Popconfirm
                        title="您确定要推送吗？"
                        onConfirm={() => { notification(record) }}
                        onCancel={cancel}
                        okText="确定"
                        cancelText="不，我在想想"
                    >
                        <a href="#" >推送</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    // 推送按钮
    const notification = (record) =>
    {
        message.success('推送成功');
        console.log(record, 'record');
    }
    function cancel (e)
    {
        console.log(e);
        message.error('取消推送');
    }
    return (
        <div onMouseEnter={() =>
        {
            if (timer) clearTimeout(timer);
            clearInterval(timer)
        }} onMouseLeave={() =>
        {
            if (timer) clearTimeout(timer);
            InitialScroll()
        }} style={{ width: '500px' }} className={styles.tableWarp}>
            <Table id="cyclicScroll" scroll={{ y: 200 }} dataSource={dataSource} columns={columns} pagination={false} rowClassName={(_, index) => index % 2 === 0 ? styles.tdOdd : styles.tdEven} />
        </div>

    );
};
export default index

CSS

.tableWarp {

  // 名字
  .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;
  }

  :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
    }
  }
}