位置: IT常识 - 正文

vue3 如何实现 表格内容无缝滚动,我又写了一堆冗余代码(vue3怎么用)

编辑:rootadmin
vue3 如何实现 表格内容无缝滚动,我又写了一堆冗余代码 背景

推荐整理分享vue3 如何实现 表格内容无缝滚动,我又写了一堆冗余代码(vue3怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3中的watch怎么用,vue的watch方法,vue3 技巧,vue3怎么写,vue3怎么写,vue实现表格,vue3如何实现表格的搜索功能,vue3如何实现表格的搜索功能,内容如对您有帮助,希望把文章链接给更多的朋友!

近期在开发可视化大屏项目,除去各种echarts图表和地图展示之外还有多个表格。现在来了一个需求,需要将大屏中的所有表格设置为内容无缝滚动。 本着程序员的七宗罪原则第一时间推脱了一下,但没推脱成功。

简单的在网上查了下适合我们项目的有两种方案,第一种是使用一款插件 vue3-seamless-scroll第二种方案是自己写JS代码通过计时器去控制表格滚动条自动滚动方案一

从实际开发上考虑使用如果有类似功能开箱即用没什么问题的插件当然是最好不过的,能提高不少工作效率达到准时下班的目的

vue3-seamless-scroll(点击进入官方文档)

根据插件描述说是目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,支持平台与Vue3.0支持平台一致。

安装npmnpm install vue3-seamless-scroll --saveyarnyarn add vue3-seamless-scrollbrowser<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"></script>配置list

无缝滚动列表数据,组件内部使用列表长度。 type: Array required: true

v-model

通过v-model控制动画滚动与停止,默认开始滚动 type: Boolean default: true required: false

direction

控制滚动方向,可选值up,down,left,right type: String default: “up” required: false

isWatch

开启数据更新监听 type: Boolean, default: true, required: false

hover

是否开启鼠标悬停 type: Boolean default: false required: false

count

动画循环次数,默认无限循环 type: Number default: “infinite” required: false

limitScrollNum

开启滚动的数据量,只有列表长度大于等于该值才会滚动 type: Number, default: 5, required: false

step

步进速度 type: Number, required: false

singleHeightvue3 如何实现 表格内容无缝滚动,我又写了一堆冗余代码(vue3怎么用)

单步运动停止的高度 type: Number, default: 0, required: false

singleWidth

单步运动停止的宽度 type: Number, default: 0, required: false

singleWaitTime

单步停止等待时间(默认值 1000ms) type: Number, default: 1000, required: false

isRemUnit

singleHeight and singleWidth 是否开启 rem 度量 type: Boolean default: true required: false

delay

动画延时时间 type: Number, default: 0, required: false

ease

动画效果,可以传入贝塞尔曲线数值 type: String | cubic-bezier, default: “ease-in”, required: false

copyNum

拷贝列表次数,默认拷贝一次,当父级高度大于列表渲染高度的两倍时可以通过该参数控制拷贝列表次数达到无缝滚动效果 type: Number default: 1 required: false

wheel

在开启鼠标悬停的情况下是否开启滚轮滚动,默认不开启 type: boolean default: false required: false

singleLine

启用单行横向滚动 type: boolean default: false required: false

使用1. 注册组件全局注册// **main.js**import { createApp } from 'vue';import App from './App.vue';import vue3SeamlessScroll from "vue3-seamless-scroll";const app = createApp(App);app.use(vue3SeamlessScroll);app.mount('#app');单文件注册<script> import { defineComponent } from "vue"; import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; export default defineComponent({ components: { Vue3SeamlessScroll } })</script>2. 使用组件

我们这里是需要表格内容滚动,直接使用组件包裹表格会让表格的表头一起跟着滚走了,所以使用上有一点小改动 需要将表格代码再复制一份,第一份代码修改css代码将表格的body部分隐藏,第二份代码用组件包裹,并将其表头部分隐藏;

<template> <div class="container"> <el-table class="top-table" :data="tableData" border style="width: 100%;"> <el-table-column prop="type" label="类型" width="120" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="content" label="内容" /> </el-table> <vue3-seamless-scroll class="seamless" :list="tableData" :hover="true" :step="0.4" :wheel="true" :isWatch="true"> <el-table class="bottom-table" :data="tableData" border style="width: 100%;"> <el-table-column prop="type" label="类型" width="120" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="content" label="内容" /> </el-table> </vue3-seamless-scroll> </div></template><script lang="ts" setup>import { ref } from 'vue'const tableData: any = ref([])const getData = () => { for (let i = 0; i < 6; i++) { tableData.value.push({ type: `家常菜${i + 1}`, name: `洋茄子炒鸡蛋${i + 1}`, content: `多情键客无情键${i + 1}` }) }}getData()</script><style scoped>.container { width: 500px; height: 300px;}.seamless { width: 100%; height: 220px; overflow: hidden;}:deep .top-table .el-table__body-wrapper { display: none;}:deep .bottom-table .el-table__header-wrapper { display: none; width: 100%;}</style>

这样看效果是不是还行,但是,还有问题,上面示例中我们只造了6条数据,但实际我们项目中表格单页有50条左右数据,那改成50条数据看一下效果

这个插件给它用于表格内容滚动已经做出部分改动了,现在想要达到我们想要的效果还要去做更多的改动,这针对我们现在的需求不能直接开箱即用,到这里我就直接放弃这个方案,如何达到我们想要的效果就放到后面有空的时候再看看,目前还是以工作效率为主。当然如果各位有谁研究好了欢迎私信我,没有奖励只想看看。

方案二

方案二就是直接操作滚动条设置一个计时器让它自己滚动,这个就是比较简单的前端的基本功

思路

我们只需要

本文链接地址:https://www.jiuchutong.com/zhishi/287970.html 转载请保留说明!

上一篇:Chateau de Castelnaud in Perigord, France (© Peter Adams/Offset by Shutterstock)

下一篇:css解决uniapp使用image标签图片无法撑满全屏问题(uniapp的css库)

  • 电脑自动关机(电脑自动关机设置和取消)

    电脑自动关机(电脑自动关机设置和取消)

  • 钉钉身份验证失败怎么重新验证(钉钉身份验证失效怎么办)

    钉钉身份验证失败怎么重新验证(钉钉身份验证失效怎么办)

  • 快手怎么分身两个(快手如何分身)

    快手怎么分身两个(快手如何分身)

  • 苹果xs为什么停售(苹果xs手机停产了吗)

    苹果xs为什么停售(苹果xs手机停产了吗)

  • 钉钉会强制打开摄像头吗(钉钉会强制打开网页吗)

    钉钉会强制打开摄像头吗(钉钉会强制打开网页吗)

  • 网络面板接a还是b(网络面板ab接法)

    网络面板接a还是b(网络面板ab接法)

  • iphone11pro max和11pro区别(iphone11pro max和11屏幕效果对比大吗)

    iphone11pro max和11pro区别(iphone11pro max和11屏幕效果对比大吗)

  • 手机自带音乐如何卸载(手机自带音乐如何关闭)

    手机自带音乐如何卸载(手机自带音乐如何关闭)

  • 微信向商家付款有限额吗(微信向商家付款怎么设置密码)

    微信向商家付款有限额吗(微信向商家付款怎么设置密码)

  • qq群被别人举报了会封号吗(qq群被别人举报了怎么恢复)

    qq群被别人举报了会封号吗(qq群被别人举报了怎么恢复)

  • 微信拉黑后朋友圈显示什么(微信拉黑后朋友圈怎么显示)

    微信拉黑后朋友圈显示什么(微信拉黑后朋友圈怎么显示)

  • 快手显示该身份证已被其他账号使用怎么办(快手显示该身份证绑定账号已达上限)

    快手显示该身份证已被其他账号使用怎么办(快手显示该身份证绑定账号已达上限)

  • 文本文件可以直接在word中处理吗(文本文件可以压缩吗)

    文本文件可以直接在word中处理吗(文本文件可以压缩吗)

  • iphone怎么换qq主题(苹果怎么换qq)

    iphone怎么换qq主题(苹果怎么换qq)

  • 为什么微信有时候有新消息没反应(为什么微信有时候收不到别人发的信息)

    为什么微信有时候有新消息没反应(为什么微信有时候收不到别人发的信息)

  • 手机省电模式怎么关闭(手机省电模式怎么关闭oppo)

    手机省电模式怎么关闭(手机省电模式怎么关闭oppo)

  • 手机qq弹窗怎么关闭(手机qq弹窗怎么开启弹幕)

    手机qq弹窗怎么关闭(手机qq弹窗怎么开启弹幕)

  • Reno Ace的SOS紧急联络怎么用(设置sos紧急)

    Reno Ace的SOS紧急联络怎么用(设置sos紧急)

  • 蓝牙耳机怎么用使用方法(蓝牙耳机怎么用 使用教程)

    蓝牙耳机怎么用使用方法(蓝牙耳机怎么用 使用教程)

  • 红外幕帘探测器怎么用(红外幕帘探测器怎么区分主人)

    红外幕帘探测器怎么用(红外幕帘探测器怎么区分主人)

  • Redmi K20 Pro运行内存是多少(redmi k20 pro配置)

    Redmi K20 Pro运行内存是多少(redmi k20 pro配置)

  • 小米手环4可以设置密码吗(小米手环4可以连接小米运动健康吗)

    小米手环4可以设置密码吗(小米手环4可以连接小米运动健康吗)

  • 荣耀9x屏幕多大(荣耀80手机屏幕多少钱)

    荣耀9x屏幕多大(荣耀80手机屏幕多少钱)

  • 什么是局部变量和全局变量(什么是局部变量?)

    什么是局部变量和全局变量(什么是局部变量?)

  • 钉钉如何激活(钉钉如何激活?)

    钉钉如何激活(钉钉如何激活?)

  • 由哈勃太空望远镜拍摄的大麦哲伦星云 (© ESA/Hubble/NASA)(哈勃太空望远镜取得的部分成果有哪些)

    由哈勃太空望远镜拍摄的大麦哲伦星云 (© ESA/Hubble/NASA)(哈勃太空望远镜取得的部分成果有哪些)

  • async/await详解(async/await原理)

    async/await详解(async/await原理)

  • 账面价值与计税基础一般会产生差异的是
  • 开的劳务费怎么做账
  • 集团内部两个公司业务可以互相外包吗
  • 租土地使用权建房
  • 人力资源行业税务政策
  • 一般纳税人简易计税可以抵扣进项税额吗
  • 企业专家咨询费标准
  • 应收账款周转率正常值范围
  • 苗木属于农产品中哪一类
  • 即征即退办理时限是多少
  • 固定资产提折旧 账务处理
  • 厂家给经销商的授权书
  • 旅游业差额开票的票据可以累计一季度吗
  • 结转上年度的企业所得税会计分录?
  • 固定资产预计净残值可以为0吗
  • 退货重新下单要付款吗
  • 企业缴纳社保费一个月多少钱
  • 企业承租经营的承租人取得的所得
  • 中国铁路建设债券
  • 小规模纳税人转成一般纳税人条件
  • 销售依据
  • 酒生产车间
  • 土地出让金抵减增值税账务处理
  • 小规模纳税人按季收入不达30万
  • 税收滞纳金可以税前扣除吗
  • 2020年运费发票备注栏新规定
  • 路由器ip分配数量
  • 附加税是按照应交增值税还是已交
  • 广告费递延几年
  • 报销差旅费退回余款
  • php获取扩展名的几种方法
  • thinkphp6开发
  • Zend Framework+smarty用法实例详解
  • 工资应发数就是企业的成本
  • html零基础入门教程
  • vue里的for循环
  • ps_clk
  • 金融机构存放的保证金存款
  • 行政单位其他应付款
  • 劳务派遣工资的发放单位
  • 自有资金等于货币资金吗
  • SQL中Exists的用法
  • 进口环节缴纳关税计入什么科目
  • 汇算清缴时发现收入少了
  • 存货增加使经营活动现金净流量减少该怎么办
  • 转让股权收入属于收入总额吗
  • 会计丁字记账法
  • 个体工商户公帐转法人私人账户
  • 应付账款挂账
  • 招待费具体范围包括哪些
  • 电影院分成比例
  • 收到票据款
  • 场地租用招标方案怎么写
  • 材料的运费计入哪个科目
  • win10安装mysql5.6
  • win2003 安装iis
  • Linux环境下MySQL服务器优化的方法详解
  • macbookpro接听苹果手机电话
  • msg是啥
  • linux如何远程桌面
  • windows8的ie浏览器在哪
  • win8.1启动设置
  • 如何找?
  • ERROR 1045: Access denied for user: root@localhost (Using password: NO)
  • prototype.js中文文档
  • nodejs 异步
  • 游戏开发之二维码怎么弄
  • cocos2dx schedule
  • jQuery使用$.ajax进行异步刷新的方法(附demo下载)
  • etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
  • 开发板io口在哪
  • 批处理系统定义
  • js数组用法
  • 四川灵活就业医保每月返多少钱
  • 国家税务局大数据局
  • 互联网新闻信息服务提供者为用户提供互联网新闻
  • 增值税进项税额抵扣凭证
  • 纳税人欠缴税款怎么办
  • 你需要了解什么 英语
  • 异辛烷征收消费税对成品油影响
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设