element多個(gè)table實(shí)現(xiàn)同步滾動(dòng)的示例代碼
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> <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多個(gè)table實(shí)現(xiàn)同步滾動(dòng)的文章就介紹到這了,更多相關(guān)element table同步滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高方法
這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計(jì)算屬性和偵聽(tīng)器來(lái)動(dòng)態(tài)監(jiān)測(cè)元素的高度,文中給出了簡(jiǎn)單代碼示例,需要的朋友可以參考下2023-09-09nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼
這篇文章主要介紹了nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程
這篇文章主要介紹了在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程,需要的朋友可以參考下2018-04-04vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫(xiě)前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios
這篇文章主要介紹了vue中調(diào)接口的方式:this.$api、直接調(diào)用、axios,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11electron中使用本地?cái)?shù)據(jù)庫(kù)的方法詳解
眾所周知,electron是可以開(kāi)發(fā)桌面端的框架,那我們有一些數(shù)據(jù)不想讓別人看到,只能在自己的電腦上展示時(shí)怎么辦呢,這個(gè)時(shí)候就可以用到本地?cái)?shù)據(jù)庫(kù),本文將以sqlite3為例介紹一下electron如何使用本地?cái)?shù)據(jù)庫(kù)2023-10-10