vue-seamless-scroll滚动

vue-seamless-scroll使用-table表格滚动

文章目录

前言

案例

目标效果：

固定table的表头，让表格内容自行滚动
效果演示：
vue-seamless-scroll使用-table表格滚动

一、安装

NPM

npm install vue-seamless-scroll --save

Yarn

yarn add vue-seamless-scroll

二、使用

main.js

import Vue from'vue'import scroll from'vue-seamless-scroll'
Vue.use(scroll)

使用组件

<div style="display: inline-block; width: 100%"><a-row gutter="16" style="margin-bottom: 10px"><a-col offset="1" span="5">序号</a-col><a-col offset="1" span="5">许可证</a-col><a-col offset="1" span="5">影响应用数</a-col><a-col offset="1" span="5">风险等级</a-col></a-row><vue-seamless-scroll
                  :class-option="defaultOption":data="dataSource"class="seamless-warp"
                  style="width: 100%"><a-table
                    :columns="columns":dataSource="dataSource":loading="loading":pagination="false":rowKey="(record, index) => { return index }":showHeader='false'class="bottom"
                    style="width: 100%"></a-table></vue-seamless-scroll></div>

computed：

computed:{defaultOption(){return{step:0.2,//数值越大速度滚动越快limitMoveNum:1,// 开始无缝滚动的数据量 this.dataList.lengthhoverStop:true,// 是否开启鼠标悬停stopdirection:1,// 0向下 1向上 2向左 3向右openWatch:true,// 开启数据实时监控刷新domsingleHeight:0,// 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth:0,// 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime:1000,// 单步运动停止的时间(默认值1000ms)}}},

CSS

.scroll-font {
  margin-left: 30px;
  margin-right: 60px;}.seamless-warp {height: 300px;overflow: hidden;}

三、案例

vue-seamless-scroll 使用

四、官网介绍

vue-seamless-scroll

五、VUE3使用vue-seamless-scroll+Table

VUE3使用该组件时，需要重新下载对应的VUE3组件，数据绑定变为了list，确认是否悬停，变为了hover-stop="true"和hover=“true”，具体如下：

下载安装：

npm install vue3-seamless-scroll --save

全局使用：

import vue3SeamlessScroll from"vue3-seamless-scroll";const app =createApp(App)
app.use(vue3SeamlessScroll)

具体代码如下：

<vue3-seamless-scroll:list="datas"hover-stop="true"hover="true"step="0.3"class="seamless-warp"style="width: 100%;"><a-table:columns="columns":data-source="datas":loading="loading":pagination="false":showHeader='false'class="bottom"style="width: 100%"></a-table></vue3-seamless-scroll>

效果图：

六、VUE3使用vue-seamless-scroll+Div

全局使用与五相同
具体代码如下：

<vue3-seamless-scroll:hover="true":hover-stop="true":list="warningInfo":step="0.3"class="seamless-warp"style="width: 100%;"><divv-for="(item, index) in warningInfo":key="index"class="item"style="padding: 10px;margin: 5px;font-size: 14px"><a-row><a-colspan="4"><divv-if="item.result == '成功'"><a-tagcolor="success">成功</a-tag></div></a-col><a-coloffset="1"span="19"><div>{{ item.userName }},{{item.keyType }}</div></a-col></a-row></div></vue3-seamless-scroll>

效果图：

详情参考：
Vue3无缝滚动----vue3-seamless-scroll