快捷導(dǎo)航

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>