效果图
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
}
}
}