element多個table實現(xiàn)同步滾動的示例代碼
更新時間：2021年09月29日 10:12:14 作者：我要睡覺了~
本文主要介紹了element多個table實現(xiàn)同步滾動，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
element ui 實現(xiàn)多個table同時滾動，橫向縱向滾動
代碼如下：
<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>
<br/>
<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')
到此這篇關(guān)于element多個table實現(xiàn)同步滾動的文章就介紹到這了,更多相關(guān)element table同步滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue生命周期中的組件化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
Vue-router編程式導(dǎo)航的兩種實現(xiàn)代碼
這篇文章主要介紹了Vue-router編程式導(dǎo)航的實現(xiàn)代碼,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
關(guān)于vue-cli-service:command?not?found報錯引發(fā)的實戰(zhàn)案例
這篇文章主要給大家介紹了關(guān)于vue-cli-service:command?not?found報錯引發(fā)的相關(guān)資料,文中通過實例代碼將解決的過程介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
Animate.css這個動畫庫,很多的動畫在這個庫里面都定義好了,我們用的時候可以直接使用里面的類名就可以,下面我們就來看看如何在vue項目中使用Animate.css吧2023-08-08
vue實現(xiàn)下拉框二級聯(lián)動效果的實例代碼
這篇文章主要介紹了vue實現(xiàn)下拉框二級聯(lián)動效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決
這篇文章主要介紹了Vue數(shù)據(jù)更新但頁面沒有更新的多種情況問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue.js模仿京東省市區(qū)三級聯(lián)動的選擇組件實例代碼
選擇省市區(qū)是我們大家在填寫地址的時候經(jīng)常會遇到的一個功能，下面這篇文章主要給大家介紹了關(guān)于利用vue.js模仿實現(xiàn)京東省市區(qū)三級聯(lián)動選擇組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
Element UI是一套基于Vue的桌面端組件庫,封裝好了很多常用的UI組件,下面這篇文章主要給大家介紹了關(guān)于element如何初始化組件功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
Vue-router結(jié)合transition實現(xiàn)app前進后退動畫切換效果的實例
下面小編就為大家?guī)硪黄猇ue-router結(jié)合transition實現(xiàn)app前進后退動畫切換效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10