欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中el-table兩個表尾合計行聯(lián)動同步滾動條實例代碼

 更新時間:2022年05月12日 09:53:51   作者:水冗水孚  
項目開發(fā)中遇到一個比較兩個form差異的需求,但當(dāng)item過多就需要滾動條,下面這篇文章主要給大家介紹了關(guān)于vue中el-table兩個表尾合計行聯(lián)動同步滾動條的相關(guā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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue實現(xiàn)在線預(yù)覽pdf文件功能(利用pdf.js/iframe/embed)

    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-06
  • Vue實現(xiàn)飛機大戰(zhàn)小游戲

    Vue實現(xiàn)飛機大戰(zhàn)小游戲

    這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)飛機大戰(zhàn)小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題

    Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題

    這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vuex actions?異步操作方法詳解

    Vuex actions?異步操作方法詳解

    這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下
    2023-10-10
  • Vue POST請求頭'Content-Type':'application/json;',data上傳過程

    Vue POST請求頭'Content-Type':'application/j

    這篇文章主要介紹了Vue POST請求頭'Content-Type':'application/json;',data上傳過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • element?表格多級表頭子列固定的實現(xiàn)

    element?表格多級表頭子列固定的實現(xiàn)

    本文主要介紹了element?表格多級表頭子列固定的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • elementUI多選框反選的實現(xiàn)代碼

    elementUI多選框反選的實現(xiàn)代碼

    這篇文章主要介紹了elementUI多選框反選的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題

    vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題

    這篇文章主要介紹了vue-router重寫push方法,解決相同路徑跳轉(zhuǎn)報錯問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue2 模板template的四種寫法總結(jié)

    Vue2 模板template的四種寫法總結(jié)

    下面小編就為大家分享一篇Vue2 模板template的四種寫法總結(jié),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue3.x源碼剖析之?dāng)?shù)據(jù)響應(yīng)式的深入講解

    vue3.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

最新評論