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://www.mzph.cn/diannao/2511.shtml

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

相关文章

Pytorch:Dataset类和DataLoader类

文章目录 一、Dataset 类1、定义2、示例 二、DataLoader 类1、定义2、参数3、示例&#xff1a;使用 DataLoader 三、总结四、实战1、load_data函数&#xff1a;2、IrisDataset类3、DataLoader 的使用 在机器学习和深度学习框架中&#xff0c;尤其是在 PyTorch 中&#xff0c;Da…

小程序 rich-text 解析富文本 图片过大时如何自适应?

在微信小程序中&#xff0c;用rich-text 解析后端返回的数据&#xff0c;当图片尺寸太大时&#xff0c;会溢出屏幕&#xff0c;导致横向出现滚动 查看富文本代码 图片是用 <img 标签&#xff0c;所以写个正则匹配一下图片标签&#xff0c;手动加上样式即可 // content 为后…

Python 面向对象——5.多态

本章学习链接如下&#xff1a; Python 面向对象——1.基本概念 Python 面向对象——2.类与对象实例属性补充解释&#xff0c;self的作用等 Python 面向对象——3.实例方法&#xff0c;类方法与静态方法 Python 面向对象——4.继承 1.基本概念 多态是面向对象编程&#x…

kafka架构

kafka架构 Kafka是一种分布式流处理平台&#xff0c;由Apache软件基金会开发。它采用发布-订阅模式&#xff0c;可以持久化和高效地处理大规模数据流。 Kafka的架构主要由以下几个组成部分&#xff1a; Producer&#xff08;生产者&#xff09;&#xff1a;发送数据到Kafka集…

贪吃蛇(C语言版)

在我们学习完C语言 和单链表知识点后 我们开始写个贪吃蛇的代码 目标&#xff1a;使用C语言在Windows环境的控制台模拟实现经典小游戏贪吃蛇 贪吃蛇代码实现的基本功能&#xff1a; 地图的绘制 蛇、食物的创建 蛇的状态&#xff08;正常 撞墙 撞到自己 正常退出&#xf…

Python蜘蛛侠

目录 写在前面 蜘蛛侠 编写代码 代码分析 更多精彩 写在后面 写在前面 本期小编给大家推荐一个酷酷的Python蜘蛛侠&#xff0c;一起来看看叭~ 蜘蛛侠 蜘蛛侠&#xff08;Spider-Man&#xff09;是美国漫威漫画宇宙中的一位标志性人物&#xff0c;由传奇创作者斯坦李与艺…

探索ChatGPT在提高人脸识别与软性生物识准确性的表现与可解释性

概述 从GPT-1到GPT-3&#xff0c;OpenAI的模型不断进步&#xff0c;推动了自然语言处理技术的发展。这些模型在处理语言任务方面展现出了强大的能力&#xff0c;包括文本生成、翻译、问答等。 然而&#xff0c;当涉及到面部识别和生物特征估计等任务时&#xff0c;这些基于文…

设计模式-00 设计模式简介之几大原则

设计模式-00 设计模式简介之几大原则 本专栏主要分析自己学习设计模式相关的浅解&#xff0c;并运用modern cpp 来是实现&#xff0c;描述相关设计模式。 通过编写代码&#xff0c;深入理解设计模式精髓&#xff0c;并且很好的帮助自己掌握设计模式&#xff0c;顺便巩固自己的c…

用于车载T-BOX汽车级的RA8900CE

用于车载T-BOX等高精度计时的汽车级时钟模块RTC:RA8900CE.车载实时时钟芯片RA8900CE内置32.768Khz的晶体&#xff0c;实现年、月、日、星期、小时、分钟和秒精准计时。RA8900CE满足AEC-Q200认证&#xff0c;内置温补功能&#xff0c;保证实时时钟的稳定可靠&#xff0c;功耗低至…

【Linux】解决ubuntu20.04版本插入无线网卡没有wifi显示【无线网卡Realtek 8811cu】

ubuntu为Realtek 8811cu安装驱动&#xff0c;解决wifi连接问题 1、确认无线网卡的型号-Realtek 8810cu2、下载并配置驱动 一句话总结&#xff1a;先确定网卡的型号&#xff0c;然后根据网卡的型号区寻找对应的驱动下载&#xff0c;下载完成之后在ubuntu系统中进行编译&#xff…

LeetCode 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV

LeetCode 123.买卖股票的最佳时机III 题目链接&#xff1a; LeetCode 123.买卖股票的最佳时机III 代码&#xff1a; class Solution { public:int maxProfit(vector<int>& prices) {int size prices.size();if(size0) return 0;//dp[i][0] 不操作//dp[i][1]…

js如何模拟表单输入

jQuery时代&#xff0c;模拟表单输入很简单&#xff0c;本质上就是操作dom&#xff0c;选择对于的dom&#xff0c;给dom.value设置值即可。 到了react时代就不同了&#xff0c;虽然也可以通过js拿到dom&#xff0c;给dom.value设置&#xff0c;但是react的状态绑定下&#xff…

Java 执行 JVM Native 方法导致内存碎片

背景&#x1f69e; 由于需要调用到 C/C 的业务对外&#xff0c;使用了 Java 来封装 SDK 进行调用。 事故起因⚡&#xff1a;当 Java 使用 JNI 发生调用 JVM Native 本地方法时&#xff0c;发现内存一直飙升发生 OOM。 操作复现&#x1f50d; 使用 Jmeter 进行压测高并发环境…

C++笔记打卡第21天(map)

1.map基本概念 map中所有元素都是pairpair中第一个元素为key&#xff0c;起到索引作用&#xff0c;第二个元素为value所有元素都会根据元素的键值自动排序 本质&#xff1a; map/multimap属于关联式容器&#xff0c;底层结构是用二叉树实现 优点&#xff1a; 可以根据key值…

HTTP慢连接攻击的原理和防范措施

随着互联网的快速发展&#xff0c;网络安全问题日益凸显&#xff0c;网络攻击事件频繁发生。其中&#xff0c;HTTP慢速攻击作为一种隐蔽且高效的攻击方式&#xff0c;近年来逐渐出现的越来越多。 为了防范这些网络攻击&#xff0c;我们需要先了解这些攻击情况&#xff0c;这样…

【笔试】03

FLOPS FLOPS 是 Floating Point Operations Per Second 的缩写&#xff0c;意为每秒浮点运算次数。它是衡量计算机性能的指标&#xff0c;特别是用于衡量计算机每秒能够执行多少浮点运算。在高性能计算领域&#xff0c;FLOPS 被广泛用来评估超级计算机、CPU、GPU 和其他处理器…

2024年区块链链游即将迎来大爆发

随着区块链技术的不断发展和成熟&#xff0c;其应用领域也在不断扩展。其中&#xff0c;区块链链游&#xff08;Blockchain Games&#xff09;作为区块链技术在游戏行业中的应用&#xff0c;备受关注。2024年&#xff0c;区块链链游行业即将迎来爆发&#xff0c;这一趋势不容忽…

Windows10如何关闭Edge浏览器的Copilot

在Windows10更新后&#xff0c;打开Edge浏览器&#xff0c;无论复制什么内容&#xff0c;都会弹出Copilot人工智能插件&#xff0c;非常令人反感&#xff0c;网上搜索的关闭方法都非常麻烦&#xff0c;比如&#xff1a;组策略和注册表。自己摸索得出最简便有效的关闭方法。 1、…

【java毕业设计】 基于Spring Boot+mysql的高校心理教育辅导系统设计与实现(程序源码)-高校心理教育辅导系统

基于Spring Bootmysql的高校心理教育辅导系统设计与实现&#xff08;程序源码毕业论文&#xff09; 大家好&#xff0c;今天给大家介绍基于Spring Bootmysql的高校心理教育辅导系统设计与实现&#xff0c;本论文只截取部分文章重点&#xff0c;文章末尾附有本毕业设计完整源码及…

一致性hash

一、什么是一致性hash 普通的hash算法 (hashcode % size )&#xff0c;如果size发生变化&#xff0c;几乎所有的历史数据都需要重hash、移动&#xff0c;代价非常大&#xff0c;常见的java中的hashmap就是如此。 那如果在hash表扩容或者收缩的时候size能够保持不变&#xff0…