vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動(dòng)并固定表頭
更新時(shí)間：2024年02月03日 10:03:36 作者：?團(tuán)子?
這篇文章主要給大家介紹了vue3中多個(gè)表格怎么同時(shí)滾動(dòng)并且固定表頭,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
說(shuō)明：這里需分為兩種情況來(lái)做。第一種親情況就是沒(méi)有修改過(guò)el-table這個(gè)組件的樣式；第二種情況就是修改過(guò)el-table組件的樣式。第一種較為簡(jiǎn)單就簡(jiǎn)單略過(guò)，這里主要提及第二種做法。
1.需求效果
2.第一種沒(méi)有修改過(guò)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寫(xiě)法（可以直接使用看看效果，沒(méi)效果的就看第二種方法）
<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.第二種修改過(guò)el-table組件的樣式
（1）我這里是修改過(guò)el-table的滾動(dòng)條樣式
（2）以下沒(méi)修改過(guò)的
（3）原因分析
從上面兩張圖片可以看出，它們區(qū)別在于輸出的（table1Wrapper ）第二級(jí)一個(gè)事table標(biāo)簽，一個(gè)不是table標(biāo)簽。所以像第二種修改過(guò)el-table組件樣式的就不再適用第一種的寫(xiě)法，因?yàn)闆](méi)有拿對(duì)節(jié)點(diǎn)，要拿的節(jié)點(diǎn)不再是.el-table__body-wrapper而是.el-scrollbar__wrap，其他寫(xiě)法就與第一種寫(xiě)法無(wú)異。
（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="利潤(rùn)" />
<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）代碼說(shuō)明
1.為什么要放到onMounted里
可以放在一個(gè)方法里，但是也需要放在onMounted，這樣就可以監(jiān)聽(tīng)到滾動(dòng)事件而不需要用watch來(lái)監(jiān)聽(tīng)
2.為什么要使用setTimeout和nextTick
照理來(lái)說(shuō)使用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ū)別在于怎么拿到對(duì)的節(jié)點(diǎn)
4.總結(jié)
說(shuō)白會(huì)出現(xiàn)第一種情況和第二種情況在于節(jié)點(diǎn)沒(méi)有拿對(duì)
最后
以上就是vue3實(shí)現(xiàn)多個(gè)表格同時(shí)滾動(dòng)并固定表頭的詳細(xì)內(nèi)容，更多關(guān)于vue3表格同時(shí)滾動(dòng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue動(dòng)態(tài)添加屬性到data的實(shí)現(xiàn)
在vue中請(qǐng)求接口中，一個(gè)請(qǐng)求方法可能對(duì)應(yīng)后臺(tái)兩個(gè)請(qǐng)求接口，所以請(qǐng)求參數(shù)就會(huì)有所不同。需要我們先設(shè)置共同的參數(shù)，然后根據(jù)條件動(dòng)態(tài)添加參數(shù)屬性2022-08-08
在 Vue 中,ref 是一個(gè)響應(yīng)式對(duì)象,修改 ref 的值會(huì)觸發(fā)組件的重新渲染,因?yàn)?nbsp;Vue 的 ref 是基于其響應(yīng)式系統(tǒng)實(shí)現(xiàn)的,任何對(duì) ref 的修改都會(huì)被 Vue 檢測(cè)到,并觸發(fā)組件的更新,本文給大家介紹Vue 和 React 使用ref的示例,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了vue elementUI 上傳非空驗(yàn)證,原理就是寫(xiě)一個(gè)假的紅色*號(hào),每次點(diǎn)擊查看的時(shí)候執(zhí)this.rules.staffImg[0].required = false,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-12-12
本文主要介紹了vue v-on傳遞參數(shù)和事件修飾符的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了)
在使用reactive定義的變量時(shí),直接賦值會(huì)失去響應(yīng)式,為了清空?filters并確保響應(yīng)式,可以使用Object.assign({},?filters)或者遍歷對(duì)象逐個(gè)清除屬性,本文介紹vue3中reactive的對(duì)象清空所引發(fā)的問(wèn)題解決方案(清空不了和清空之后再去賦值就賦值不了),感興趣的朋友一起看看吧2025-02-02
由于Vue多個(gè)狀態(tài)分散的跨越在許多組件和交互間各個(gè)角落，大型應(yīng)用復(fù)雜度也經(jīng)常逐漸增長(zhǎng)。為了解決這個(gè)問(wèn)題，Vue提供了vuex。本文將詳細(xì)介紹Vue狀態(tài)管理vuex,需要的朋友可以參考下2020-02-02
Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）
vue項(xiàng)目中點(diǎn)擊router-link標(biāo)簽鏈接都屬于聲明式導(dǎo)航。vue項(xiàng)目中編程式導(dǎo)航有this.$router.push(),this.$router.replace(),this.$router.go()???????。這篇文章主要介紹了Vue路由跳轉(zhuǎn)方式區(qū)別匯總（push，replace，go）2022-12-12
vue-cli中的babel配置文件.babelrc實(shí)例詳解
Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。本文介紹vue-cli腳手架工具根目錄的babelrc配置文件，感興趣的朋友一起看看吧2018-02-02
Vue中的數(shù)據(jù)監(jiān)聽(tīng)和數(shù)據(jù)交互案例解析
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽(tīng)和數(shù)據(jù)交互案例解析,在文章開(kāi)頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽(tīng)事件$watch，具體代碼講解，大家可以參考下本文2017-07-07