antd table 表格 循环滚动 css有问题 把 styles都删除掉 已测试

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React, { useEffect, useState } from 'react'
import styles from './style.css'
import { Table } from 'antd';
 
const dataSource = [
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1，user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user2'
  },
  {
    grade: '策略texe',
    resource: '资源1',
    status: 'user1'
  },
];
 
const columns = [
  {
    title: '策略名',
    dataIndex: 'grade',
    key: 'grade',
    // render: text => <div style={text == '重要' ? { background: 'linear-gradient(1deg, #E7474D 0%, #FF0042 100%)' } : { background: 'linear-gradient(180deg, #777C84 0%, #708293 100%)' }}><a>{text}</a></div>,
  },
  {
    title: '资源名',
    dataIndex: 'resource',
    key: 'resource'
  },
  {
    title: '用户列表',
    dataIndex: 'status',
    key: 'status',
    render: text => <div><div style={text == '未处理' ? { background: '#F01E2A' } : null}></div ><span>{text}</span></div>
  }
];
 
const Index = () => {
  const [timer, setTimer] = useState(null);  // 定时器
  // const [count, setCount] = React.useState(0)
  useEffect(() => {  // 发送数据请求 设置订阅/启动定时器 手动更改 DOM 等 ~
    // 如果有真实数据 请在数据请求后 调用此方法
    InitialScroll(dataSource)
    return () => {
      clearInterval(timer)
    }
  }, [])  // 检测数组内变量 如果为空 则监控全局
  // 开启定时器
  const InitialScroll = (data) => {
    let v = document.getElementsByClassName("ant-table-body")[0];
    if (data.length > 3)  // 只有当大于三条数据的时候 才会看起滚动
    {
      let time = setInterval(() => {
        v.scrollTop += 1.5;
        if (Math.ceil(v.scrollTop) >= parseFloat(v.scrollHeight - v.clientHeight)) {
          v.scrollTop = 0
          // setTimeout(() => { v.scrollTop = 0 }, 1000)
        }
      }, 100)
      setTimer(time)  // 定时器保存变量 利于停止
    }
  }
 
  return (
    <div>
      <div>
        <div onMouseEnter={() => {
          if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
          clearInterval(timer)
        }} onMouseLeave={() => {
          if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
          InitialScroll(dataSource)
        }}>
          <Table id="cyclicScroll" className="cyclicScrolls1" scroll={{ y: 200 }} dataSource={dataSource} columns={columns} pagination={false} />
        </div>
      </div>
    </div >
  )
}
 
export default Index

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
.cyclicScrolls1 .ant-table-body{
  overflow: hidden;
}
.cyclicScrolls1 .ant-table-thead>tr{
  height: 10px!important;
}
.cyclicScrolls1 .ant-table-thead>tr>th{
  background: white;
  color: black!important;
  font-weight: 800!important;
}
.cyclicScrolls1 .ant-table-tbody>tr>td{
  height: 10px!important;
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table tfoot > tr > th, .ant-table tfoot > tr > td{
  padding: 8px 8px!important;
}
.overall {
  height: 162px;
  box-sizing: border-box;
}
.table {
  width: 100%;
  height: 100%;
}
/* 等级 */
.grade {
  margin: 0 auto;
  margin-top: -1px;
  font-weight: bold;
  width: 50px;
  height: 20px;
  border-radius: 2px;
  text-align: center;
  line-height: 18px;
}
.grade>.gradeA {
  font-size: 16px;
  color: #FFFFFF;
}
.statusBox {
  display: flex;
  align-items: center;
  justify-content: center;
}
.statusBox>.status {
  width: 6px;
  height: 6px;
  background: #6DE922;
  border-radius: 50%;
  margin-right: 5px;
}
.statusBox>.status>.statusSpan {
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
}
.oddNumber {
  background: rgba(58, 90, 162, 0.1);
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  height: 38px;
  padding: 0px !important;
  font-family: "DINpro";
}
.evenNumbers {
  background: rgba(58, 90, 162, 0.33);
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  height: 38px;
  font-family: "DINpro";
}

　　

posted on   左侧岚  阅读(213)  评论(0)  编辑  收藏  举报

相关博文：
·  改antd表格样式
·  react 使用antd 同1个页面 多次点击不同标签页的对话框 背景色逐渐加深 前提是对话框 一直使用的是1个对话框
·  react + antd table列表自动滚动
·  【Antd】Table的斑马线行背景色设置
·  【React】Antd
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示
SQL AI 助手