vue中el-table兩個表尾合計行聯(lián)動同步滾動條實例代碼
問題描述
最近產(chǎn)品提出一個需求,說是做表格呈現(xiàn)統(tǒng)計數(shù)據(jù),不過數(shù)據(jù)源是來自兩個地方的,所以需要做兩個表格去呈現(xiàn)數(shù)據(jù),同時在表格最后統(tǒng)計數(shù)據(jù)。
效果圖
我們先看一下效果圖
思路
獲取對應(yīng)的兩個表格設(shè)置滾動條的dom,并通過Element.scrollLeft去設(shè)置滾動的距離
官方文檔:developer.mozilla.org/zh-CN/docs/…
滾動容器(審查元素即可得知):
完整代碼
自己演示的話,直接復(fù)制粘貼即可,代碼中包含注釋
<template> <div class="kkk"> <div class="myWrap"> <el-table ref="one" :data="tableBody" border :header-cell-style="{ background: '#FAFAFA', color: '#333333', fontWeight: 'bold', fontSize: '14px', }" show-summary > <el-table-column type="index" label="序號" width="60"> </el-table-column> <el-table-column prop="bookType" label="人物隸屬" width="100" ></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="zhifubao" label="支付寶" width="160"> </el-table-column> <el-table-column prop="weixin" label="微信" width="160"> </el-table-column> <el-table-column prop="jingdong" label="京東" width="160"> </el-table-column> <el-table-column prop="yunshanfu" label="云閃付" width="160"> </el-table-column> <el-table-column prop="suning" label="蘇寧" width="160"> </el-table-column> <el-table-column prop="lakala" label="拉卡拉" width="160"> </el-table-column> </el-table> <el-table ref="two" :data="tableBody2" border show-summary :show-header="false" > <el-table-column type="index" label="序號" width="60"> </el-table-column> <el-table-column prop="bookType" label="業(yè)務(wù)類型" width="100" ></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="zhifubao" label="支付寶" width="160"> </el-table-column> <el-table-column prop="weixin" label="微信" width="160"> </el-table-column> <el-table-column prop="jingdong" label="京東" width="160"> </el-table-column> <el-table-column prop="yunshanfu" label="云閃付" width="160"> </el-table-column> <el-table-column prop="suning" label="蘇寧" width="160"> </el-table-column> <el-table-column prop="lakala" label="拉卡拉" width="160"> </el-table-column> </el-table> </div> </div> </template> <script> // cnpm i lodash --save import _ from "lodash"; export default { data() { return { tableBody: [ { bookType: "西游記", name: "孫悟空", zhifubao: 1, weixin: 2, jingdong: 3, yunshanfu: 4, suning: 5, lakala: 6, }, { bookType: "西游記", name: "豬八戒", zhifubao: 6, weixin: 5, jingdong: 4, yunshanfu: 3, suning: 2, lakala: 1, }, ], tableBody2: [ { bookType: "三國演義", name: "劉備", zhifubao: 2, weixin: 2, jingdong: 2, yunshanfu: 2, suning: 2, lakala: 2, }, { bookType: "三國演義", name: "豬八戒", zhifubao: 3, weixin: 3, jingdong: 3, yunshanfu: 3, suning: 3, lakala: 3, }, ], }; }, mounted() { // 1. 初始化的時候,設(shè)置橫向滾動規(guī)則 this.setScrollRule(); }, methods: { setScrollRule() { let that = this; // 存一份this便于取用 this.one = this.$refs.one.bodyWrapper; // 獲取帶有滾動條的dom元素,注意餓了么UI的el-table的橫向滾動條是設(shè)置在類名為 this.two = this.$refs.two.bodyWrapper; // class="el-table__body-wrapper is-scrolling-left" 這個dom上。審查元素可知 console.log("滾動條dom容器", this.one); // 2. 綁定滾動事件,順帶加上一個節(jié)流函數(shù)吧,也算是性能優(yōu)化 this.one.addEventListener( "scroll", _.throttle( function () { that.fn1(); // 85毫秒觸發(fā)一次吧 }, 85, { leading: true, //指定調(diào)用在節(jié)流開始前 trailing: false, //指定調(diào)用在節(jié)流結(jié)束后, } ) ); // 同上... this.two.addEventListener( "scroll", _.throttle( function () { that.fn2(); }, 85, { leading: true, trailing: false, } ) ); }, // 3. 通過Element.scrollLeft屬性 可以讀取或設(shè)置元素滾動條到元素左邊的距離 fn1() { console.log("滾動條一 移動多少?", this.one.scrollLeft); this.two.scrollLeft = this.one.scrollLeft; /** * 加了節(jié)流函數(shù)以后,就會出現(xiàn)當(dāng)我們滑動過快的時候,遠(yuǎn)小于定義節(jié)流時間所觸發(fā)的間隔 * 就會出現(xiàn)距離不準(zhǔn)確問題,所以再加一個延時定時器重新更正(更新一下位置) * */ setTimeout(() => { this.two.scrollLeft = this.one.scrollLeft; // api文檔詳情見mdn文檔:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft }, 120); }, // 同上... fn2() { console.log("滾動條二 移動多少?", this.two.scrollLeft); this.one.scrollLeft = this.two.scrollLeft; setTimeout(() => { this.one.scrollLeft = this.two.scrollLeft; }, 120); }, }, beforeDestroy() { // 移除事件監(jiān)聽 this.one.removeEventListener("scroll", this.fn1); this.one.removeEventListener("scroll", this.fn2); }, }; </script>
總結(jié)
到此這篇關(guān)于vue中el-table兩個表尾合計行聯(lián)動同步滾動條的文章就介紹到這了,更多相關(guān)vue el-table聯(lián)動同步滾動條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3應(yīng)用elementPlus table并滾動顯示問題
- vue3?el-table結(jié)合seamless-scroll實現(xiàn)表格數(shù)據(jù)滾動的思路詳解
- vue中獲取滾動table的可視頁面寬度調(diào)整表頭與列對齊(每列寬度不都相同)
- vue elementUI table表格數(shù)據(jù) 滾動懶加載的實現(xiàn)方法
- vue element-ui table表格滾動加載方法
- vue iview 隱藏Table組件里的某一列操作
- Vue基于iview table展示圖片實現(xiàn)點擊放大
- 淺談vue的iview列表table render函數(shù)設(shè)置DOM屬性值的方法
- vue 使用iView組件中的Table實現(xiàn)定時自動滾動效果
相關(guān)文章
Vue實現(xiàn)在線預(yù)覽pdf文件功能(利用pdf.js/iframe/embed)
項目要求需要預(yù)覽pdf文件,網(wǎng)上找了很久,發(fā)現(xiàn)pdf.js的效果,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)在線預(yù)覽pdf文件功能,主要利用pdf.js/iframe/embed來實現(xiàn)的,需要的朋友可以參考下2021-06-06Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06Vue POST請求頭'Content-Type':'application/j
這篇文章主要介紹了Vue POST請求頭'Content-Type':'application/json;',data上傳過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題
這篇文章主要介紹了vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的深入講解
這篇文章主要給大家介紹了關(guān)于vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的相關(guān)資料,在講解過程中,我們會對比Vue2.x的API特性,使用有哪些區(qū)別,需要的朋友可以參考下2022-01-01