Vue3中使用无缝滚动插件vue3-seamless-scroll

官网:https://www.npmjs.com/package/vue-seamless-scroll

1、实现效果文字描述:

表格中的列数据进行横向无缝滚动,某一列进行筛选的时候,重新请求后端的数据,进行刷新

2、安装:npm i vue3-seamless-scroll --save

3、在组件内使用:

在这里插入图片描述
在这里插入图片描述

4、完整代码:

<template><a-spin :spinning="spinning"><a-table :dataSource="tableData" :columns="columns" :pagination="false" :showSorterTooltip="false" @change="handleTableChange"><template #bodyCell="{ column, record, index }"><!-- 索引列 --><template v-if="column.key === 'index'"><div class="key">{{ index + 1 }}</div></template><template v-if="column.key === 'name'"><div class="td-style"><Vue3SeamlessScroll :list="(record.name || '').split('')" :step="1" :hover="true" direction="left"><span>{{ record.name }}</span></Vue3SeamlessScroll></div></template><!-- <template v-if="column.key === 'age'"><div class="td-style"><div :class="record.age.toString().length > 10 ? 'scrollLeft' : ''">{{ record.age }}</div></div></template> --><template v-if="column.key === 'age'"><div class="td-style"><Vue3SeamlessScroll :list="tableData" :step="1" direction="left"><span v-for="(item,index) in tableData" :key="index">{{ item.age }}</span></Vue3SeamlessScroll></div></template></template></a-table></a-spin>
</template><script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
// 引入无缝滚动组件
import { Vue3SeamlessScroll }  from 'vue3-seamless-scroll'export default defineComponent({name: 'defineComponent',components: {Vue3SeamlessScroll},setup () {interface DataItem {key: number|string;  // 这个是必须的,不然会引起错误,比如数据不更新name: string;age: number;}const data = reactive({tableData: [] as DataItem[],columns: [{title: '序号',key: 'index',width: 150,align: 'center',},{title: '姓名',dataIndex: 'name',key: 'name'},{title: '年龄',dataIndex: 'age',key: 'age',sorter: {compare: (a: DataItem, b: DataItem) => a.age - b.age,multiple: 3, // 多列优先级},}],spinning: true})onMounted(() => {init()})// 数据初始化const init = () => {data.tableData = [{key: '1',name: '这是第一个这是第一个',age: 11111111166},{key: '2',name: '这是第2个这是第2个这是第2个',age: 22222222233},{key: '3',name: '三三三三三三',age: 33333335555},{key: '4',name: 'sisisisissisisisissi',age: 444444446666}]data.spinning = false}const handleTableChange = (pag: { pageSize: number; current: number },filters: any,sorter: any,) => {data.spinning = truedata.tableData = [{key: '5', // 这个是必须的name: '213456789123456789',age: 0},{key: '6',name: '213456789123456789',age: 8469955},{key: '7',name: '213456789123456789',age: 898456},{key: '8',name: '213456789123456789',age: 256667777777}]data.spinning = false}return {...toRefs(data),handleTableChange}}
})
</script><style>.ant-table-thead > tr > th {font-size: 48px;}.ant-table-tbody > tr > td {font-size: 32px;}.td-style {width: 200px;overflow: hidden;white-space: nowrap;font-size: 26px;}.ant-table-column-sorter-up, .ant-table-column-sorter-down {font-size: 32px!important;}.scrollLeft {animation: scrollLeft 5s linear infinite;}/* 定义动画 */@keyframes scrollLeft {0% {transform: translateX(50);}100% {transform: translateX(calc(-100%)); /* 加上一些额外的空白,以便滚动到最后一个元素时不会立即切换 */}}
</style>

5、效果:

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Git和Github绑定

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

基于RT-Thread的智能家居助手

一、项目简介 智能家居助手主要基于RT-Thread开发的&#xff0c;该系统主要分为语音子系统&#xff0c;环境监测子系统&#xff0c;智能控制子系统&#xff0c;智能网关子系统&#xff0c;音乐播放器&#xff0c;云端以及应用软件七大部分。语音子系统可通过语音进行人机交互来…

SMT工艺上出现焊锡球,将有什么影响?

在表面贴装技术&#xff08;SMT&#xff09;加工过程中&#xff0c;可能会出现焊锡球形成的问题&#xff0c;焊锡球的存在不仅影响产品的外观质量&#xff0c;还可能导致电路短路&#xff0c;从而影响产品性能和可靠性&#xff0c;所以必须提前了解焊锡球的形成原因&#xff0c…

Tensorflow2.0笔记 - BatchNormalization

本笔记记录BN层相关的代码。关于BatchNormalization&#xff0c;可以自行百度&#xff0c;或参考这里&#xff1a; 一文读懂Batch Normalization - 知乎神经网络基础系列&#xff1a; 《深度学习中常见激活函数的原理和特点》《过拟合: dropout原理和在模型中的多种应用》深度…

(五)AB测试及两个案例 学习简要笔记 #统计学 #CDA学习打卡

目录 一. AB测试简介 1&#xff09;假设检验的一般步骤 2&#xff09;基于假设检验的AB测试步骤 二. 案例1&#xff1a;使用基于均值的假设检验进行AB测试 1&#xff09;原始数据 2&#xff09;提出原假设H0和备择假设H1 3&#xff09;使用均值之差的t检验&#xff0c;计…

Electron+Vue3+ElectronForge整合 - 打包时整合 -分步打包

说明 本文介绍一下 Electron Vue3 的打包整合的基本操作。实现的效果是 &#xff1a; 1、一个正常的Vue3项目&#xff1b; 2、整合加入 Electron 框架 &#xff1a;开发时 Electron 加载的是开发的vue项目&#xff1b; 3、完成打包时整合&#xff1a;3.1 先完成vue3项目的正常…

vue3 引入@tsparticles/vue3和@tsparticles/slim 实现粒子特效

1.安装&#xff1a; yarn add tsparticles/vue3 tsparticles/slim2.main.ts 引入 import Particles from "tsparticles/vue3"; import { loadSlim } from "tsparticles/slim";app.use(Particles as any, {init: async (engine: any) > {await loadSli…

如何在 Flutter 中制作多种颜色的 TextField

TextField widget 本身并不施加任何样式。相反&#xff0c;它会要求 TextEditingController 生成一个样式化的 TextSpan 对象&#xff0c;即一段带有样式的文本。 TextField 将其样式传递给 TextEditingController &#xff0c;默认实现只是将其放入 TextSpan 对象中&#xff0…

光纤网络电力控制系统设计方案:623-6U CPCI的光纤网络电力控制系统

6U CPCI的光纤网络电力控制系统 一、设备概述 柔性直流输电系统中用于控制与测量的FS系统&#xff0c;适用于风电和太阳能发电的并网快速数值计算和闭环控制&#xff0c;以及与直流输电系统的换流器有关的特殊控制功能&#xff0c;包括门控单元的信号处理。该控制板的最大…

【C语言回顾】操作符详解

前言1. 操作符分类2. 二进制和进制转换2.1 二进制2.2 进制转换2.2.1 二进制转十进制2.2.2 二进制转八进制2.2.3 二进制转十六进制 3. 原码、反码、补码4. 移位操作符4.1 左移操作符4.2 右移操作符 5. 位操作符6. 单目操作符7. 逗号表达式8. 下标引用操作符9. 函数调用操作符10.…

3D 文件格式的江湖纷争

自从上世纪 60 年代计算机辅助设计(Computer Aided Design, CAD)发明已来,3D 图形产业繁荣发展,逐步覆盖工业制造、影视游戏、VR/AR 、3D 打印等各个领域。如果说 3D 模型是构成 XR 应用场景的基础组件,那么 3D 文件格式就是构建 XR 世界沟通语言。而伴随各种 3D 建模软件…

基于Springboot的幼儿园管理系统

基于SpringbootVue的幼儿园管理系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 用户管理 教师管理 幼儿园信息管理 班级信息管理 工作日志管理 会议记录管理…

AI时代的GPU集群网络算力分析

浅谈GPU集群网络、集群规模和集群算力 引言在生成式AI&#xff08;GenAI&#xff09;和大模型时代&#xff0c;不仅需要关注单个GPU卡的算力&#xff0c;更要关注GPU集群的总有效算力。单个GPU卡的有效算力可以通过该卡的峰值算力来测算&#xff0c;例如&#xff0c;对于Nvidia…

C语言入门课程学习笔记1

C语言入门课程学习笔记1 第1课 - 概论第2课 -helloworld第3课 -数据输出第4课 -数据类型与变量第5课 - 深入数据类型与变量第6课 - 类型与变量编程练习第7课 - 程序中的数据输入 本文学习自狄泰软件学院 唐佐林老师的 C语言入门课程&#xff0c;图片全部来源于课程PPT&#xff…

Linux内核之hook机制:call_void_hook用法实例(六十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

【国产替代】航空电子通信总线航空电子通信总线产品为MIL-STD-1553和ARINC 429等协议提供原生支持

航空电子通信总线 航空电子通信总线产品为MIL-STD-1553和ARINC 429等协议提供原生支持。这些产品用于进行航空电子应用所需的开发、生产和系统测试。 PXIe&#xff0c;2通道PXI ARINC-664接口模块 AIM ARINC-664具有板载处理器&#xff0c;可自动处理所有与协议相关的活动&…

在vscode上面进行分支merge的记录

前言&#xff1a;在我们的项目中&#xff0c;有两个分支&#xff1a;master和liutielong。现在要将liutielong分支的改动merge到master分支中。 如果master分支已经更改了&#xff0c;所以要先pull&#xff08;这是在git bash里面的命令&#xff09;。 git pull origin master…

Java虚拟机类加载机制详细总结

1、概述 Java虚拟机把描述类的数据从Class文件加载到内存&#xff0c;并对数据进行校验、转换解析和初始化&#xff0c;最终形成可以被虚拟机直接使用的Java类型&#xff0c;这个过程被称作虚拟机的类加载机制。 2、类加载的时机 一个类型从被加载到虚拟机内存中开始&#xff…

网盘——查看文件

本文主要讲解文件操作过程中&#xff0c;查看文件如何实现&#xff0c;实现步骤如下&#xff1a; 1、实现步骤&#xff1a; A、首先客户端发送查看请求&#xff08;包含目录信息&#xff09; B、服务器将文件名字还有文件的类型发送给客户端&#xff08;只发送文件的名字&am…

基于小程序实现的查寝打卡系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;ssm 【…