位置: 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库)

  • java startswith(javastartswith函数)

    java startswith(javastartswith函数)

  • 微信怎么申请湖北健康码(微信怎么申请湖北健康码视频)

    微信怎么申请湖北健康码(微信怎么申请湖北健康码视频)

  • 如何关闭健康宝通勤(如何关闭健康宝定位)

    如何关闭健康宝通勤(如何关闭健康宝定位)

  • iphonexr怎么录屏幕视频(iphonexr怎么录制屏幕)

    iphonexr怎么录屏幕视频(iphonexr怎么录制屏幕)

  • 华为荣耀8x手机怎样截屏(华为荣耀8x手机屏幕不受控制乱跳)

    华为荣耀8x手机怎样截屏(华为荣耀8x手机屏幕不受控制乱跳)

  • iphone pro和max区别(苹果pro和max)

    iphone pro和max区别(苹果pro和max)

  • 我抖音已设私密账号谁能看我(我抖音已设私密账号谁能看我发布的作品)

    我抖音已设私密账号谁能看我(我抖音已设私密账号谁能看我发布的作品)

  • 群收款码怎么设置(群收款二维码怎么设置)

    群收款码怎么设置(群收款二维码怎么设置)

  • 小米手环pai是什么(小米手环pai是什么健康指标)

    小米手环pai是什么(小米手环pai是什么健康指标)

  • 怎么取消人脸识别(怎么取消人脸识别删除账单)

    怎么取消人脸识别(怎么取消人脸识别删除账单)

  • 电脑连不上手机热点(电脑连不上手机wifi)

    电脑连不上手机热点(电脑连不上手机wifi)

  • 苹果11有256G吗(苹果11256g二手卖多少钱)

    苹果11有256G吗(苹果11256g二手卖多少钱)

  • 华为手机qq闪照已销毁怎么恢复(华为手机qq闪照在哪个文件夹里面)

    华为手机qq闪照已销毁怎么恢复(华为手机qq闪照在哪个文件夹里面)

  • netware和cad是系统软件吗(cad .net framework3.5)

    netware和cad是系统软件吗(cad .net framework3.5)

  • 抖音保存本地在哪找(抖音保存本地在哪里找到)

    抖音保存本地在哪找(抖音保存本地在哪里找到)

  • 抖音一天可以发多少视频(抖音一天可以发多少私信)

    抖音一天可以发多少视频(抖音一天可以发多少私信)

  • 有什么软件可以设置动态锁屏(有什么软件可以识别图片的文字)

    有什么软件可以设置动态锁屏(有什么软件可以识别图片的文字)

  • 健康三环表盘含义(健康3环代表什么)

    健康三环表盘含义(健康3环代表什么)

  • iphonex能用电信卡吗(iphonex可以用电信)

    iphonex能用电信卡吗(iphonex可以用电信)

  • qq群发祝福在哪里找(qq群发祝福哪些节日有)

    qq群发祝福在哪里找(qq群发祝福哪些节日有)

  • 瀑布屏是什么(瀑布屏是什么手机)

    瀑布屏是什么(瀑布屏是什么手机)

  • 安卓怎么上ios游戏(怎样在安卓上玩ios)

    安卓怎么上ios游戏(怎样在安卓上玩ios)

  • office用32位还是64位(office用32位还是)

    office用32位还是64位(office用32位还是)

  • 抖音怎么退出粉丝团(抖音怎么退出粉丝团灯牌)

    抖音怎么退出粉丝团(抖音怎么退出粉丝团灯牌)

  • 高德打车如何成为司机(高德打车如何成为快车司机)

    高德打车如何成为司机(高德打车如何成为快车司机)

  • React框架第七课 语法基础课《第一课React你好世界》(react框架结构)

    React框架第七课 语法基础课《第一课React你好世界》(react框架结构)

  • javaweb:jquery中ajax的应用

    javaweb:jquery中ajax的应用

  • 财务软件按什么排序
  • 税务行政复议包括必须复议自由复议和选择复议三种类型
  • 增值税进项税没那么多,申报表多填
  • 小规模公司房租费发票税率
  • 其他债权投资和其他权益工具投资均可以计提减值
  • 注册资本余额为100万亿元
  • 从基本存款账户之外的银行结算账户转账存入
  • 股东补亏资金
  • 有留抵税额会计分录
  • 个体户办营业执照需要什么证件和材料
  • 商品流通企业会计心得体会3000字
  • 12月份奖金怎么扣个税
  • 简易计税的劳务公司员工社保可以抵扣增值税吗
  • 开票系统维护费可以全额抵扣吗
  • 计提税金和缴纳税金的会计分录
  • 理财赎回利息怎么做账分录
  • 合伙企业对外投资收益怎么纳税
  • 试用期可以不交五险一金吗
  • 企业报表里面利润怎么填
  • 新开的公司会计需要做什么
  • 老板垫付的货款怎么做凭证?
  • 建筑工地发生的典型意外情况有哪些
  • 什么是盈余公积和资本公积
  • 公司费用高好还是低好
  • 遗失发票如何处理好
  • 税控设备抵减增值税会计处理
  • 委托代销委托方需要开发票吗
  • 公益性捐赠增值税税率
  • php比较两个字符串
  • php 单例模式优点及如何实现
  • uniapp中使用amap-vue,设置安全密钥
  • 应税货物及劳务无法录入
  • php 输出
  • 建行企业网上银行主管盾权限分配
  • Node 下 Http Streaming 的跨浏览器实现
  • 出差托运行李公司报销吗
  • 手机开的发票
  • 客户的赔偿金会计分录
  • 企业向合伙企业分红怎么交税
  • phpcms v9安装教程
  • php上传文件代码iapp
  • 工会经费的会计分录2022
  • 企业按行业划分可划分为哪些
  • sql中身份证号码用什么类型
  • 股东收到投资收益会计科目
  • 记账凭证核算处理方法
  • 收到税务局退回的增值税税款怎么做账
  • 金税盘抵扣在申报表哪填
  • 建筑工程公司的经营范围有哪些
  • 过了认证期怎么办
  • 银行日记账登记依据
  • 资产处置损失抵税
  • 货物破损怎么写会计分录
  • 开出口未开出口怎么办
  • 工业企业建立账套
  • mysql could not be resolved: Name or service not known
  • 不用鲁大师
  • 操作系统运行慢怎么解决
  • win7怎么更改电脑名字
  • reg.exec
  • linux,windows
  • 怎么更改window系统字体
  • 电脑ip地址设置在哪里
  • Win10 Mobile 10586无法更新应用怎么办 一招教你解决
  • win7计算机怎么设置开机密码
  • 什么时候用热毛巾敷眼睛最好
  • cocos2d游戏源码
  • 投影变换的使用方法
  • view组件属性
  • Android一分钟环境搭建,包含Mac、Linux、Windows
  • 跳跳僵尸小游戏攻略
  • gdi双缓冲绘制
  • bootstrap tooltip
  • node 进程
  • dw中css规则定义中文
  • javascript声明变量的语句
  • js移动端拖拽
  • unity大神
  • select ui
  • 纳税人状态怎么填
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设