Ant-Table样式初始化-优快云博客

该博客展示了如何在React应用中利用Ant Design库创建一个带有自动滚动功能的表格。代码示例包括了表格数据的定义、滚动效果的实现以及操作列中的推送功能，其中涉及到了useState和useEffect Hook。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

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