vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動(dòng)并固定表頭
更新時(shí)間：2024年02月03日 10:03:36 作者：?團(tuán)子?
這篇文章主要給大家介紹了vue3中多個(gè)表格怎么同時(shí)滾動(dòng)并且固定表頭,文中通過代碼示例給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
說明：這里需分為兩種情況來做。第一種親情況就是沒有修改過el-table這個(gè)組件的樣式；第二種情況就是修改過el-table組件的樣式。第一種較為簡單就簡單略過，這里主要提及第二種做法。
1.需求效果
2.第一種沒有修改過el-table這個(gè)組件的樣式的做法
（1）直接看大佬vue2的做法
element ui 實(shí)現(xiàn)多個(gè)table同時(shí)滾動(dòng)，橫向縱向滾動(dòng)
代碼如下：
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<div id="app">
<template>
<el-table
ref="table1"
border="10"
height="150"
:data="tableData"
style="width: 800px">
<el-table-column
prop="date"
label="日期"
width="300">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="300">
</el-table-column>
<el-table-column
width="300px"
prop="address"
label="地址">
</el-table-column>
<el-table-column
width="300px"
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-table
ref="table2"
border="10"
height="150"
:data="tableData"
style="width: 800px">
<el-table-column
prop="date"
label="日期"
width="300">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="300">
</el-table-column>
<el-table-column
width="300px"
prop="address"
label="地址">
</el-table-column>
<el-table-column
width="300px"
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
</div>
var Main = {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市'
}],
dom1: null,
dom2: null
}
},
mounted() {
this.dom1 = this.$refs.table1.bodyWrapper
this.dom2 = this.$refs.table2.bodyWrapper
this.listenerScroll()
},
methods: {
listenerScroll() {
this.dom2.addEventListener('scroll', () => {
// 橫滾
this.dom1.scrollLeft = this.dom2.scrollLeft
// 豎滾
this.dom1.scrollTop = this.dom2.scrollTop
})
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
（2）以下是vue3寫法（可以直接使用看看效果，沒效果的就看第二種方法）
<template>
<div>
<el-table ref="table1" :data="tableData" style="width: 100%; margin-bottom: 20px" height="200px">
<el-table-column prop="date" label="Date" width="180"></el-table-column>
<el-table-column prop="name" label="Name" width="180"></el-table-column>
</el-table>
<el-table ref="table2" :data="tableData" style="width: 100%" height="200px">
<el-table-column prop="address" label="Address" width="180"></el-table-column>
<el-table-column prop="tag" label="Tag" width="180"></el-table-column>
</el-table>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElTable } from 'element-plus'
const table1 = ref(null)
const table2 = ref(null)
let overElement = ""
onMounted(() => {
const table1Wrapper = table1.value.$refs.bodyWrapper
const table2Wrapper = table2.value.$refs.bodyWrapper
console.log("table1Wrapper",table1Wrapper);
table1Wrapper.addEventListener('mouseover', () => {
overElement = "a"
console.log("overElement1",overElement);
})
table2Wrapper.addEventListener('mouseover', () => {
overElement = "b"
console.log("overElement2",overElement);
})
table1Wrapper.addEventListener('scroll', () => {
console.log("overElement3",overElement);
if (overElement === "a") {
console.log("overElement4",overElement);
table2Wrapper.scrollTop = table1Wrapper.scrollTop
}
})
table2Wrapper.addEventListener('scroll', () => {
console.log("overElement5",overElement);
if (overElement === "b") {
console.log("overElement6",overElement);
table1Wrapper.scrollTop = table2Wrapper.scrollTop
}
})
})
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Home',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
tag: 'Office'
}
]
</script>3.第二種修改過el-table組件的樣式
（1）我這里是修改過el-table的滾動(dòng)條樣式
（2）以下沒修改過的
（3）原因分析
從上面兩張圖片可以看出，它們區(qū)別在于輸出的（table1Wrapper ）第二級一個(gè)事table標(biāo)簽，一個(gè)不是table標(biāo)簽。所以像第二種修改過el-table組件樣式的就不再適用第一種的寫法，因?yàn)闆]有拿對節(jié)點(diǎn)，要拿的節(jié)點(diǎn)不再是.el-table__body-wrapper而是.el-scrollbar__wrap，其他寫法就與第一種寫法無異。
（4）實(shí)現(xiàn)代碼
<div>
<el-table :data="tableData" id="table1" @selection-change="handleSelect" border height="40vh" scrollbar-always-on>
<el-table-column width="60" fixed type="selection" />>
<el-table-column width="120" prop="omsCostItemDto.costName" label="計(jì)費(fèi)項(xiàng)名稱" />
<el-table-column prop="omsCostItemDto.profit" label="利潤" />
<el-table-column width="100" prop="omsCostItemDto.merchandiser" label="跟單員" />
</el-table>
<el-table :data="tableData" id="table2" border height="40vh" scrollbar-always-on>
<el-table-column width="120" prop="omsReceiveDto.writeOffAmount" label="核銷金額" />
<el-table-column width="120" prop="omsReceiveDto.notReceivedAmount" label="未收金額" />
<el-table-column width="180" prop="omsReceiveDto.receiveCreateDate" label="賬單生成時(shí)間" />
</el-table>
<el-table :data="tableData" id="table3" border height="40vh" scrollbar-always-on>
<el-table-column width="180" prop="omsPayDto.serviceProvidersName" label="服務(wù)商名稱" class-name="unconfirmed" />
<el-table-column width="180" prop="omsPayDto.meetName" label="應(yīng)付企業(yè)名稱" />
</el-table>
</div>onMounted(() => {
getList(); // 獲取列表數(shù)據(jù)
setTimeout(() => { // 實(shí)現(xiàn)同步豎向滾動(dòng)
nextTick(() => {
let table1Wrapper = document.getElementById('table1').getElementsByClassName('el-scrollbar__wrap')[0]
let table2Wrapper = document.getElementById('table2').getElementsByClassName('el-scrollbar__wrap')[0]
let table3Wrapper = document.getElementById('table3').getElementsByClassName('el-scrollbar__wrap')[0]
console.log("table1Wrapper",table1Wrapper);
table1Wrapper.addEventListener('scroll', () => {
table2Wrapper.scrollTop = table1Wrapper.scrollTop;
table3Wrapper.scrollTop = table1Wrapper.scrollTop;
})
table2Wrapper.addEventListener('scroll', () => {
table1Wrapper.scrollTop = table2Wrapper.scrollTop;
table3Wrapper.scrollTop = table2Wrapper.scrollTop;
})
table3Wrapper.addEventListener('scroll', () => {
table1Wrapper.scrollTop = table3Wrapper.scrollTop;
table2Wrapper.scrollTop = table3Wrapper.scrollTop;
})
})
}, 1000);
})（5）代碼說明
1.為什么要放到onMounted里
可以放在一個(gè)方法里，但是也需要放在onMounted，這樣就可以監(jiān)聽到滾動(dòng)事件而不需要用watch來監(jiān)聽
2.為什么要使用setTimeout和nextTick
照理來說使用onMounted聲明周期就可以了，因?yàn)樗淖饔檬菕煸诤?，?shù)據(jù)和節(jié)點(diǎn)都已經(jīng)生成；我這里不知道什么原因不使用setTimeout和nextTick就拿不到節(jié)點(diǎn)，數(shù)據(jù)倒是已生成（可能是我把getList(); // 獲取列表數(shù)據(jù)放在了前面）
3.重點(diǎn)
重點(diǎn)在于document.getElementById('table1').getElementsByClassName('el-scrollbar__wrap')[0]獲取正確的節(jié)點(diǎn)，第一種情況和第二種情況區(qū)別在于怎么拿到對的節(jié)點(diǎn)
4.總結(jié)
說白會出現(xiàn)第一種情況和第二種情況在于節(jié)點(diǎn)沒有拿對
最后
以上就是vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動(dòng)并固定表頭的詳細(xì)內(nèi)容，更多關(guān)于vue3表格同時(shí)滾動(dòng)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于vue+h5實(shí)現(xiàn)車牌號輸入框功能(demo)
最近開發(fā)項(xiàng)目是學(xué)校校內(nèi)車輛超速方面的統(tǒng)計(jì)檢測方面的系統(tǒng),在開發(fā)過程中發(fā)現(xiàn)有個(gè)小功能,就是用戶移動(dòng)端添加車牌號,剛開始想著輸入框,提交時(shí)正則效驗(yàn)一下格式,最后感覺不方便,所以就簡單自己手寫了一個(gè)H5車牌號軟鍵盤,對vue車牌號輸入框?qū)崿F(xiàn)代碼感興趣的朋友一起看看吧2025-03-03
在vue3項(xiàng)目中實(shí)現(xiàn)國際化的代碼示例
國際化就是指在一個(gè)項(xiàng)目中，項(xiàng)目中的語言可以進(jìn)行切換（中英文切換），那么在實(shí)際項(xiàng)目中是如何實(shí)現(xiàn)的呢，本文就給大家詳細(xì)的介紹實(shí)現(xiàn)方法,需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)的多頁面項(xiàng)目如何優(yōu)化打包的步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)的多頁面項(xiàng)目如何優(yōu)化打包的步驟詳解，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能
cube-ui?是基于?Vue.js?實(shí)現(xiàn)的精致移動(dòng)端組件庫，由于很長一段時(shí)間沒有學(xué)習(xí)cube-ui?的功能實(shí)現(xiàn)示例代碼了，今天通過本文給大家介紹下Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能，感興趣的朋友跟隨小編一起看看吧2023-01-01
vue3父子傳值實(shí)現(xiàn)彈框功能的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue3如何利用父子傳值實(shí)現(xiàn)彈框功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Vue全局監(jiān)測錯(cuò)誤并生成錯(cuò)誤日志實(shí)現(xiàn)方法介紹
在做完一個(gè)項(xiàng)目后，之后的維護(hù)尤為重要。這時(shí)，如果項(xiàng)目配置了錯(cuò)誤日志記錄，這樣能大大減少維護(hù)難度。雖然不一定能捕獲到全部的錯(cuò)誤，但是一般的錯(cuò)誤還是可以監(jiān)測到的。這樣就不用測試人員去一遍一遍復(fù)現(xiàn)bug了2022-10-10
在Vue項(xiàng)目中取消ESLint代碼檢測的步驟講解
今天小編就為大家分享一篇關(guān)于在Vue項(xiàng)目中取消ESLint代碼檢測的步驟講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
Luckysheet?在vue中離線使用及引入報(bào)錯(cuò)的解決方案(推薦)
這篇文章主要介紹了Luckysheet?在vue中離線使用方法及引入報(bào)錯(cuò)的解決方案,將dist離線包在項(xiàng)目創(chuàng)建個(gè)文件夾放著，然后根據(jù)放置的位置在?index.html里面引入，下面通過案例給大家介紹我的項(xiàng)目里面放置的位置，需要的朋友可以參考下2022-10-10
el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法
在element?ui中的日期時(shí)間選擇組件中默認(rèn)是00:00,現(xiàn)在需求是點(diǎn)擊默認(rèn)結(jié)束時(shí)間為當(dāng)前時(shí)分秒,查了很多資料寫的都不準(zhǔn)確?,今天給大家分享el-date-picker默認(rèn)結(jié)束為當(dāng)前時(shí)分秒的操作方法,感興趣的朋友一起看看吧2024-01-01
vue 路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),傳參方式可劃分為 params 傳參和 query 傳參,本文將給大家介紹如何通過不同方式在 Vue 3 中傳遞路由參數(shù),需要的朋友可以參考下2024-07-07