antd table 表格 循环滚动

最新推荐文章于 2024-03-19 18:01:49 发布
最新推荐文章于 2024-03-19 18:01:49 发布
阅读量2.4k 收藏 12
点赞数 3
分类专栏： react 文章标签： react.js javascript 前端
臧小川
本文链接：https://blog.csdn.net/chuan0106/article/details/121788455
版权

JS

import React, { useEffect, useState } from 'react'
import styles from './style.less'
import { Table } from 'antd';

const dataSource = [
    {
        grade: '重要',
        time: '人脸识别告警',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '已处理'
    },
    {
        grade: '一般',
        time: '人员走散',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '已处理'
    },
    {
        grade: '一般',
        time: '违规翻越门禁通道',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '未处理'
    },
    {
        grade: '一般',
        time: '违规翻越门禁通道',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '未处理'
    },

    {
        grade: '重要',
        time: '人脸识别告警',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '已处理'
    },

    {
        grade: '一般',
        time: '哈哈哈',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '未处理'
    },
    {
        grade: '一般',
        time: '违规翻越门禁通道',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '未处理'
    },
    {
        grade: '一般',
        time: '违规翻越门禁通道',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '未处理'
    },

    {
        grade: '重要',
        time: '人脸识别告警',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '已处理'
    },

    {
        grade: '一般',
        time: '嘿嘿IEhi额',
        type: '2020.11.28 14:26:00',
        adress: '2020.11.28 15:23:46',
        status: '未处理'
    },

];

const columns = [
    {
        title: '等级',
        dataIndex: 'grade',
        key: 'grade',
        width: 50,
        render: text => <div style={text == '重要' ? { background: 'linear-gradient(1deg, #E7474D 0%, #FF0042 100%)' } : { background: 'linear-gradient(180deg, #777C84 0%, #708293 100%)' }} className={styles.grade}><a className={styles.gradeA}>{text}</a></div>,
    },
    {
        title: '事件类型',
        dataIndex: 'time',
        key: 'time'
    },
    {
        title: '报警时间',
        dataIndex: 'type',
        key: 'type',
    },
    {
        title: '处理时间',
        dataIndex: 'adress',
        key: 'adress',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: text => <div className={styles.statusBox}><div style={text == '未处理' ? { background: '#F01E2A' } : null} className={styles.status} ></div ><span className={styles.statusSpan}>{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 className={styles.container}>
            <div className={styles.overall}>
                <div onMouseEnter={() =>
                {
                    if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
                    clearInterval(timer)
                }} onMouseLeave={() =>
                {
                    if (timer) clearTimeout(timer);  // 如果之前有定时器 先把之前的定时器取消
                    InitialScroll(dataSource)
                }} className={styles.table}>
                    <Table id="cyclicScroll" scroll={{ y: 110 }} dataSource={dataSource} columns={columns} pagination={false} rowClassName={(record, index) => index % 2 === 0 ? styles.oddNumber : styles.evenNumbers} />
                </div>
            </div>
        </div >
    )
}

export default Index

CSS

.overall {
  height: 162px;
  box-sizing: border-box;

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

    ::-webkit-scrollbar-thumb {
      // 改变滚动条样式
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(89, 89, 89, 0.2);
      background: #939392;
    }

    ::-webkit-scrollbar-track {
      display: none;
      -webkit-box-shadow: 0;
      border-radius: 0;
      background: #f0f2f5;
    }


    .ant-table-thead>tr>th {
      background-color: rgba(40, 108, 224, 0.33);
      height: 30px;
      font-size: 16px;
      font-weight: 400;
      color: #37B6FF;
      text-align: center;
    }

    .ant-table-thead>tr>th {
      border-bottom: none;
    }


    .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-body {
      overflow: auto;
    }

    .ant-table-header {
      background: none;
    }

    .ant-table-fixed-header>.ant-table-content>.ant-table-scroll>.ant-table-body {
      background: none;
    }

    .ant-table-header .ant-table-hide-scrollbar {
      overflow: auto;
    }

    .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-thead>tr>th {
      background-color: rgba(40, 108, 224, 0.33);
      height: 30px;
      font-size: 20px;
      font-weight: 400;
      color: #37B6FF;
    }

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

    .ant-empty-normal {
      color: #FFFFFF;
    }


    .ant-table {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.85);
      font-variant: tabular-nums;
      line-height: 1.5715;
      list-style: none;
      font-feature-settings: 'tnum';
      position: relative;
      font-size: 14px;
      background: rgba(0, 0, 0, 0);
      border-radius: 2px;
    }

    .ant-table-container table>thead>tr:first-child th:last-child {
      display: none;
      border-top-right-radius: 2px;
    }

  }


}

.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;

  .gradeA {
    font-size: 16px;
    color: #FFFFFF;
  }
}

.statusBox {
  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-family: SourceHanSansSC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }

}

.oddNumber {
  background: rgba(58, 90, 162, 0.1);
  font-size: 16px;
  // font-family: PingFang SC;
  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-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  height: 38px;

  font-family: "DINpro";
}
臧小川
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
antd table按表格里的日期去排序操作
01-18
表格内容 根据票据日期升序（这里是已经排序后的效果） 上代码 代码中data的内容如下 根据paper_date排序，因为目前这种格式不支持比较，需要先转换成时间戳 new Date(aTimeString).getTime() 之后再用装换后的时间戳去比较，比较用到的函数是 .sort，一下是用来比较的代码 data.sort(function(a, b) { let aTimeString = a.paper_date; let bTimeString = b.paper_date; let aTime = new Date(aTimeStr
react+antd+table实现表格数据在当前页从头到尾循环滚动展示
weixin_45481456的博客
06-27 1674
不带分页的表格滚动
Ant Design 的 Table，设置自动滚动效果，触底返回顶部，悬浮停止滚动， Table的 scrollTo 简单使用。
最新发布
youyudehan的博客
03-19 807
让你的Table 组件滚动起来！,Ant Design 的 Table，设置自动滚动效果，触底返回顶部，悬浮停止滚动， Table的 scrollTo 简单使用。
react-table:具有无限滚动支持的React Table组件
04-05
表React 描述 具有无限滚动支持的React Table组件 原料药 < Table> data: Array < { } > onScroll : Function onItemClick : ( item : Object ) => any onRemoveItems : ( items : Array < Object > ) = > any / >
横向滚动table列表
07-09
简单的分列式table列表组件，通过组合关联table和UICollection实现，给予大家简单的启示。
Antd的table组件表格的序号自增操作
01-18
1，效果图 2，实现方法 const columns = [ { title: '序号', render:(text,record,index)=>`${index+1}`, }, { title:'操作', dataIndex:'delete', key:'delete', render: (text,record) => ( <Link to={{ pathname : '/info/Edit' , query : { id : record.id }}}> 删除</Link> ), },
React,antd实现自动滚动Table封装组件
Aeporn的博客
03-17 3459
只是根据工作需要,简单写了这种方法 如有不妥, 你就当看不见… 如有好的建议,私我/评论即可 .MD 参数名称 ｜ 注释 ｜ 默认值 rollNum ｜ 超过多少条开始自动滚动 ｜ 10 rollTop ｜ 滚动速度 ｜ 1.5 rollTime ｜ 滚动时间 ｜ 100ms scroll ｜ 表格大小 ｜ y:500px x:100% flag | 是否滚动
react表格无缝滚动_放弃antd table，基于React手写一个虚拟滚动的表格
weixin_42357837的博客
01-17 1633
缘起标题有点夸张，并不是完全放弃antd-table，毕竟在react的生态圈里，对国人来说，比较好用的PC端组件库，也就antd了。即便经历了2018年圣诞彩蛋事件，antd的使用者也不仅不减，反而有所上升。客观地说，antd是开源的，UI设计得比较美观(甩出其他组件库一条街)，而且是蚂蚁金服的体验技术部(一堆p7,p8,p9，基本都是大牛级的)在持续地开发维护，质量可以信任。不过，antd虽好...
antd table组件在flex布局下宽度自动无限增加
microcosm1994的博客
05-10 727
antd table组件在flex布局下宽度自动无限增加。
React+Antd实现Table数据滚动加载
qq_42327090的博客
12-13 4775
最近在学习前端React，正好来个一个需求要求实现数据滚动加载的功能，在查询antd官网后，感觉官网上比较复杂，然后通过查询资料，最终完成该功能，特将实现该功能的代码分线给大家，望各位大佬不吝赐教。
Ant Design Vue Table自动滚动实现方案
SZHFCLXX的博客
05-16 1761
Ant Design Vue Table自动滚动实现方案
react-antd table树形数据默认展开行实现jsx文件
12-18
react-antd table树形数据默认展开行实现jsx文件
在antd Table中插入可编辑的单元格实例
01-21
看了antd Table 的官方组件，发现不太灵活，所以自己动手写了一下。 实现的思路大同小异，在columns中插入Input，很简单的，直接render中返回就好，只是中间遇到小插曲，改变一个input的值所有的都跟着改变，原来是...
antd 表格列宽自适应方法以及错误处理操作
01-18
在antd 的表格中, 当你不设置表格滚动, 并且你给每一列设置了固定宽度, 那么他们会按照设置宽度的比例瓜分表格的宽度 表格横向滚动, 序号, 权属人左定位 antd 中的表格列固定是隐藏原列, 然后又在上面覆盖新列实现的...
antd Design Table二次封装
04-26
阿里出品的Ant Design UI组件用起来可以说是很顺手的，但是用多了会发现有时候还能更高效一点，那么我就萌生了对个别组件...没积分的可以去git上下载：https://gitee.com/jsicu/react-antdTable-secondEncapsulation
解决Antd Table组件表头不对齐的问题
01-18
在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动 但是在添加了该属性之后，经常会出现表头不对齐的问题： 针对该问题Google 了一下解决方案，但大多不是很完善，为...
antd中table展开行默认展示,且不需要前边的加号操作
01-22
在table中配置 <Table expandedRowKeys={this.store.chargeTableData.map(item> item.key)} //展开的行 expandIconAsCell={false} expandIconColumnIndex={-1} bordered //展示边框 defaultExpandAllRows={...
antd design table更改某行数据的样式操作
01-18
antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string–>返回类型是String类型。 例子： import styless from ‘./component/record.css’;—>引入css样式。 css: .csbsTypes{ font...
antd-table-react.zip
07-13
antd-table(react)实现表格首行、首列固定，压缩包中代码下载即用。可以根据实际需求灵活进行修改。先npm install，然后npm run start即可看到表格哟。
antd table 表格横向滚动条粘性在底部
05-25
要实现antd table表格横向滚动条粘性在底部，可以使用css样式来实现。 首先，在table组件上加上scroll属性： ```javascript <Table scroll={{ x: 'max-content', y: 500 }} columns={columns} dataSource={data} /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

臧小川

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值