快捷導(dǎo)航

vue3如何實(shí)現(xiàn)表格內(nèi)容無縫滾動(又寫了一堆冗余代碼)

更新時間：2024年04月01日 11:10:43 作者：洋茄子炒雞蛋

這篇文章主要給大家介紹了關(guān)于vue3如何實(shí)現(xiàn)表格內(nèi)容無縫滾動的相關(guān)資料,在Vue3項(xiàng)目中難免會遇到讓列表滾動的需求,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

背景

近期在開發(fā)可視化大屏項(xiàng)目，除去各種echarts圖表和地圖展示之外還有多個表格。現(xiàn)在來了一個需求，需要將大屏中的所有表格設(shè)置為內(nèi)容無縫滾動。
本著程序員的七宗罪原則第一時間推脫了一下，但沒推脫成功。

簡單的在網(wǎng)上查了下適合我們項(xiàng)目的有兩種方案，第一種是使用一款插件 vue3-seamless-scroll
第二種方案是自己寫JS代碼通過計時器去控制表格滾動條自動滾動

方案一

從實(shí)際開發(fā)上考慮使用如果有類似功能開箱即用沒什么問題的插件當(dāng)然是最好不過的，能提高不少工作效率達(dá)到準(zhǔn)時下班的目的

vue3-seamless-scroll

（點(diǎn)擊進(jìn)入官方文檔）

根據(jù)插件描述說是目前組件支持上下左右無縫滾動，單步滾動，并且支持復(fù)雜圖標(biāo)的無縫滾動，支持平臺與Vue3.0支持平臺一致。

安裝

npm
npm install vue3-seamless-scroll --save

yarn
yarn add vue3-seamless-scroll

browser
<script src="https://unpkg.com/browse/vue3-seamless-scroll@1.0.2/dist/vue3-seamless-scroll.min.js"></script>

配置

list

無縫滾動列表數(shù)據(jù)，組件內(nèi)部使用列表長度。
type: Array
required: true

v-model

通過v-model控制動畫滾動與停止，默認(rèn)開始滾動
type: Boolean
default: true
required: false

direction

控制滾動方向，可選值up，down，left，right
type: String
default: “up”
required: false

isWatch

開啟數(shù)據(jù)更新監(jiān)聽
type: Boolean,
default: true,
required: false

hover

是否開啟鼠標(biāo)懸停
type: Boolean
default: false
required: false

count

動畫循環(huán)次數(shù)，默認(rèn)無限循環(huán)
type: Number
default: “infinite”
required: false

limitScrollNum

開啟滾動的數(shù)據(jù)量，只有列表長度大于等于該值才會滾動
type: Number,
default: 5,
required: false

step

步進(jìn)速度
type: Number,
required: false

singleHeight

單步運(yùn)動停止的高度
type: Number,
default: 0,
required: false

singleWidth

單步運(yùn)動停止的寬度
type: Number,
default: 0,
required: false

singleWaitTime

單步停止等待時間(默認(rèn)值 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

動畫效果，可以傳入貝塞爾曲線數(shù)值
type: String | cubic-bezier,
default: “ease-in”,
required: false

copyNum

拷貝列表次數(shù)，默認(rèn)拷貝一次，當(dāng)父級高度大于列表渲染高度的兩倍時可以通過該參數(shù)控制拷貝列表次數(shù)達(dá)到無縫滾動效果
type: Number
default: 1
required: false

wheel

在開啟鼠標(biāo)懸停的情況下是否開啟滾輪滾動，默認(rèn)不開啟
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. 使用組件

我們這里是需要表格內(nèi)容滾動，直接使用組件包裹表格會讓表格的表頭一起跟著滾走了，所以使用上有一點(diǎn)小改動
需要將表格代碼再復(fù)制一份，第一份代碼修改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="內(nèi)容" />
        </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="內(nèi)容" />
            </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條數(shù)據(jù)，但實(shí)際我們項(xiàng)目中表格單頁有50條左右數(shù)據(jù)，那改成50條數(shù)據(jù)看一下效果

這個插件給它用于表格內(nèi)容滾動已經(jīng)做出部分改動了，現(xiàn)在想要達(dá)到我們想要的效果還要去做更多的改動，這針對我們現(xiàn)在的需求不能直接開箱即用，到這里我就直接放棄這個方案，如何達(dá)到我們想要的效果就放到后面有空的時候再看看，目前還是以工作效率為主。當(dāng)然如果各位有誰研究好了歡迎私信我，沒有獎勵只想看看。

方案二

方案二就是直接操作滾動條設(shè)置一個計時器讓它自己滾動，這個就是比較簡單的前端的基本功

思路

我們只需要聲明一個計時器，在獲取到 table 數(shù)據(jù)后獲取滾動區(qū)域 scrollHeight ，在計時器中通過修改 scrollTop 實(shí)現(xiàn)滾動條自動滾動

很快碼完代碼后我們看一下效果

我的代碼

<template>
    <div class="container">
        <el-table ref="tableRef" :data="tableData" border style="width: 100%;height: 100%;">
            <el-table-column prop="type" label="類型" width="120" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="content" label="內(nèi)容" />
        </el-table>
    </div>
</template>

<script setup>

import { ref, onMounted, onUnmounted } from 'vue'

let timer = null;
let tableRef = ref(null);
const scroll = () => {
    // 在執(zhí)行新的計時器前將之前的計時器清除
    if (timer) clearInterval(timer);
    let status = true;
    // 獲取表格滾動區(qū)域的dom
    const scrollDom = tableRef.value.$refs.bodyWrapper.getElementsByClassName("el-scrollbar__wrap")[0];

    // 增加監(jiān)聽事件鼠標(biāo)移入停止?jié)L動
    scrollDom.addEventListener('mouseover', () => {
        status = false;
    });
    // 鼠標(biāo)移出恢復(fù)滾動
    scrollDom.addEventListener('mouseout', () => {
        status = true;
    });

    // 設(shè)置每秒滾動一行
    timer = setInterval(() => {
        if (status) {
        	// 設(shè)置每次滾動的像素
            scrollDom.scrollTop += 40;
            // 當(dāng)滾動到底部時修改scrollTop回到頂部
            if ((scrollDom.scrollHeight - (scrollDom.clientHeight + scrollDom.scrollTop)) < 1 ) {
                scrollDom.scrollTop = 0;
            }
        }
    }, 1000);
}

const tableData = ref([])
const getData = () => {
    for (let i = 0; i < 50; i++) {
        tableData.value.push({
            type: `家常菜${i + 1}`,
            name: `洋茄子炒雞蛋${i + 1}`,
            content: `多情鍵客無情鍵${i + 1}`
        })
    }
    // 要在數(shù)據(jù)都加載渲染完成后去獲取表格的滾動區(qū)域dom
    setTimeout(() => {scroll()}, 1000)
}


onMounted(() => {
    getData()
})

onUnmounted(() => {
	// 組件卸載記得清除計時器
    if (timer) clearInterval(timer);
    timer = null;
})

</script>

<style scoped>
.container {
    width: 500px;
    height: 310px;
}
</style>