vue写个表格,让它滚动起来,没有用datav,有的时候结合会出错,一种简单的方法,直接用animation

表格样式就先不说了哈,这些简单内容,如果粉丝朋友还有什么问题,可以私信

好啦,首先,第一步

1.在目录的这个地方创建文件夹css,里面放两个文件

.

第一个文件里面内容

第二个文件里面内容

.drawCur{

  cursor: url(../img/map/draw_2.png),auto;

}

.cesium-credit-logoContainer{

  display: none!important;

}

.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i {

  cursor: pointer;

  width: 16px;

  height: 16px;

  margin-left: 20px;

  line-height: 30px;

  display: inline-block;

  vertical-align: middle;

  position: relative;

  color: white;

}

.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i.vlicon-max {

  display:none;

}

.vl-notify.vl-notify-alert h2.vl-notice-title .lv-icon-maxmini i.vlicon-huanyuan {

  background: url(/img/icon.551539f8.png) no-repeat;

  background-position: -65px -40px;

  color: white;

}

2...准备好之后去mainjs里面注册

import "@/assets/css/animation.css"

3.最后去组件中使用(这里方便操作,表格我们就不使用组件了,更方便一些)

  <div class='table-container' @mouseover='stopScroll' @mouseout='startScroll'>

      <div class='table-header-wrapper'>

        <table>

          <thead>

          <tr>

            <th>编号</th>

            <th>高级功能</th>

            <th>时间</th>

            <th>原因</th>

          </tr>

          </thead>

        </table>

      </div>

      <div class='table-body-wrapper'>

        <table>

          <tbody ref='tbodyRef'>

          <tr

            v-for='(item, index) in fullData'

            :key='index'

            :class="index % 2 === 0 ? 'even-row' : 'odd-row'"

          >

            <td>{{ item.id }}</td>

            <td>{{ item.troubleTypeid }}</td>

            <td>{{ item.airvalue }}</td>

            <td>{{ item.because }}</td>

          </tr>

          </tbody>

        </table>

      </div>

    </div>

script中,,这里数据写你们自己的内容哈,我的就不放了

  data() {

      return {

        scrollOffset: 0,

      rowHeight: 40, // 假设每行高度是40px

      fullData: [],

        data: [

          { id: '', troubleTypeid: '', airvalue: '', because: '' },

        ],

        paginationData: {

          current: 1,

          pageSize: 3

        }

      }

    },

    mounted() {

    this.fullData = [...this.data, ...this.data] // 将数据翻倍以实现无缝滚动

    this.startScroll()

  },

方法当中放两个函数

  startScroll() {

        console.log("进入 startScroll")

      const tbody = this.$refs.tbodyRef

      const rowHeight = this.rowHeight // 假设每行高度是40px

      const totalHeight = rowHeight * this.fullData.length

      console.log("进入 startScroll",totalHeight)

      tbody.style.animation = `scroll ${totalHeight / 40}s linear infinite`

      // 开始动画

      tbody.style.animationPlayState = 'running'

    },

    stopScroll() {

      const tbody = this.$refs.tbodyRef

      tbody.style.animationPlayState = 'paused'

    },

就可以实现啦,看我的文章,每一篇,绝对都是有收获的!!!!!!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/456475.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网站建设中需要注意哪些安全问题?----雷池社区版

服务器与应用安全指南 1. 服务器安全 1.1 操作系统安全 及时更新补丁&#xff1a;确保操作系统始终安装最新补丁&#xff0c;以防范系统漏洞。例如&#xff0c;Windows Server 定期推送安全更新&#xff0c;修复如远程代码执行等潜在威胁。优化系统服务配置&#xff1a;关闭不…

深度学习系列——RNN/LSTM/GRU,seq2seq/attention机制

1、RNN/LSTM/GRU可参考&#xff1a; https://zhuanlan.zhihu.com/p/636756912 &#xff08;1&#xff09;对于这里面RNN的表示中&#xff0c;使用了输入x和h的拼接描述&#xff0c;其他公式中也是如此 &#xff08;2&#xff09;各符号图含义如下 2、关于RNN细节&#xff0c;…

node.js学习Day1

1.全局安装express npm install -g express-generator2.创建项目 express node-demo 3.项目安装依赖,补充nodemon npm installnpm install -g nodemon 4.整理目录和初始代码&#xff0c;去掉view文件夹&#xff0c;添加dao和service文件夹&#xff0c;注意app.js文件夹引用…

qt QSaveFile详解

QSaveFile 是 Qt 提供的一个类&#xff0c;用于安全地保存文件。它的主要特点是在写入文件时确保数据完整性&#xff0c;以防止文件损坏。使用 QSaveFile&#xff0c;您可以创建一个临时文件&#xff0c;并在成功写入后将其重命名为目标文件&#xff0c;这样可以避免在写入过程…

uniapp 常用的地区行业各种多选多选,支持回显,复制粘贴可使用

uniapp 常用的地区行业各种多选多选&#xff0c;支持回显 必须导入uni-popup 弹出层 该组件 1.目前项目开发中使用到这类似挺多的&#xff0c;记录一下&#xff0c;方便以后是使用 2.使用前提&#xff0c;目前不做无限级&#xff0c;只支持二维数组&#xff0c;模板里只循环了两…

Discuz发布原创AI帖子内容生成:起尔 | AI原创帖子内容生成插件开发定制

Discuz发布原创AI帖子内容生成&#xff1a;起尔 | AI原创帖子内容生成插件开发定制 在当今互联网快速发展的时代&#xff0c;内容创作成为了网站运营、社交媒体管理和个人博客维护不可或缺的一部分。然而&#xff0c;高质量内容的创作往往耗时耗力&#xff0c;特别是对于需要频…

【使用winget下载Java21】

winget search java选择需要的版本 winget install BellSoft.Liberic aJDK.21.full

Openpyxl--学习记录

1.工作表的基本操作 1.1 工作表的新建打开与保存 1.1.1 创建工作簿 from openpyxl import Workbook from pathlib import Pathfile_path Path.home() / "Desktop" / "123.xlsx"# 1.创建工作簿 wb Workbook() # 2.访问默认工作簿 ws wb.active # 3.填充…

【算法】spfa最短路径算法

目录 一、概念 二、思路 三、spfa求最短路 在阅读本文前请先食用&#xff1a; 【算法】Bellman-Ford单源最短路径算法&#xff08;附动图&#xff09;-CSDN博客文章浏览阅读366次&#xff0c;点赞16次&#xff0c;收藏14次。算法学习笔记之Bellman-Ford单源最短路径算法htt…

线性代数学习

1.标量由只有一个元素的张量表示 import torchx torch.tensor([3,0]) y torch.tensor([2,0])x y, x * y, x / y, x**y 2.可以将向量视为标量值组成的列表 x torch.arange(4) x 3.通过张量的索引访问任一元素 x[3] 4.访问张量长度 len(x) 5.只有一个轴的张量&#xff0c…

JAVA Maven 的安装与配置

一、下载地址 官方网站&#xff1a;Maven – Download Apache Maven 我这里是3.8.6版本 二、安装步骤 maven安装之前要先安装jdk&#xff0c;请确保你的系统已经安装了jdk环境。 1.将下载好的 Maven 进行解压 apache-maven-3.6.8-bin.zip 2.配置本地仓库:修改 conf/settin…

【D3.js in Action 3 精译_037】4.1 DIY 实战:D3 源码分析之——d3.timeFormat() 函数

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…

yarn的安装与使用以及与npm的区别(安装过程中可能会遇到的问题)

一、yarn的安装 使用npm就可以进行安装 但是需要注意的一点是yarn的使用和node版本是有关系的必须是16.0以上的版本。 输入以下代码就可以实现yarn的安装 npm install -g yarn 再通过版本号的检查来确定&#xff0c;yarn是否安装成功 yarn -v二、遇到的问题 1、问题描述…

【Qt】控件——Qt控件的介绍、QWidget的介绍、QWidget的属性、QWidget的函数

文章目录 Qt1. 控件的概念2. QWidgetenabledgeometrywindowTitlewindowIconwindowOpacitycursorfonttoolTiptoolTipDuringstyleSheet Qt 1. 控件的概念 Widget 是 Qt 中的核心概念。英文原义是 “小部件”&#xff0c;我们此处也把它翻译为 “控件”。控件是构成一个图形化界面…

算法剖析:二分查找

文章目录 前言二分查找模板朴素模板左右查找模板 一、二分查找二、 在排序数组中查找元素的第一个和最后一个位置三、搜索插入位置四、x 的平方根五、山脉数组的峰顶索引六、寻找峰值七、寻找旋转排序数组中的最小值八、 点名总结 前言 二分查找是一种高效的查找算法&#xff…

基于SpringBoot的“高校校园点餐系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“高校校园点餐系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 前台首页功能界面图 用户注册、登录界面图 我…

时间序列预测(十)——长短期记忆网络(LSTM)

目录 一、LSTM结构 二、LSTM 核心思想 三、LSTM分步演练 &#xff08;一&#xff09;初始化 1、权重和偏置初始化 2、初始细胞状态和隐藏状态初始化 &#xff08;二&#xff09;前向传播 1、遗忘门计算&#xff08;决定从上一时刻隐状态中丢弃多少信息&#xff09; 2、…

基于.NET 8.0,C#中Microsoft.Office.Interop.Excel来操作office365的excel

开发环境&#xff1a; Visual Studio 2022 office365 项目模板&#xff1a;WPF应用程序 框架&#xff1a;.NET 8.0 依赖&#xff1a;Microsoft.Office.Interop.Excel 注意&#xff1a; 1.使用Microsoft.Office.Interop.Excel库时&#xff0c;服务器或电脑里面必须安装得…

qt QLineEdit详解

一、概述 QLineEdit 是 Qt 框架中用于创建单行文本输入框的类。它非常适合用于接收用户输入&#xff0c;例如用户名、密码或其他简单的文本信息。它提供了许多有用的编辑功能&#xff0c;支持多种输入模式和文本限制&#xff0c;并支持撤销、重做、剪切、粘贴以及拖放等功能。…

【AI服务器】全国产PCIe 5.0 Switch SerDes 测试和分析,以11槽PCIe GPU底板(PCIe 4.0/5.0)为例(二)

3 PCIe 4.0 SerDes 和 5.0 SerDes 要求比较 表 2 总结 PCIe 4.0 和 5.0 SerDes 要求之间的差 异。PCIe 标准包含三个相互依赖的规范&#xff0c;这些规范 旨在确保不同供应商的 SerDes 和通道的互操作性&#xff1a; ● PCIe BASE 规范定义了整个协议栈的芯片 级性能,是一…