vue中el-table两个表尾合计行联动同步滚动条实例代码

Trixie ·

更新时间:2024-09-20

· 1980 次阅读

问题描述

效果图

思路

完整代码

总结

问题描述

最近产品提出一个需求，说是做表格呈现统计数据，不过数据源是来自两个地方的，所以需要做两个表格去呈现数据，同时在表格最后统计数据。

效果图

我们先看一下效果图

思路

获取对应的两个表格设置滚动条的dom，并通过Element.scrollLeft去设置滚动的距离

官方文档：developer.mozilla.org/zh-CN/docs/…

滚动容器（审查元素即可得知）：

完整代码

自己演示的话，直接复制粘贴即可，代码中包含注释

<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="业务类型"
          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. 初始化的时候，设置横向滚动规则
    this.setScrollRule();
  },
  methods: {
    setScrollRule() {
      let that = this; // 存一份this便于取用
      this.one = this.$refs.one.bodyWrapper; // 获取带有滚动条的dom元素，注意饿了么UI的el-table的横向滚动条是设置在类名为
      this.two = this.$refs.two.bodyWrapper; // class="el-table__body-wrapper is-scrolling-left" 这个dom上。审查元素可知
      console.log("滚动条dom容器", this.one);
      // 2. 绑定滚动事件，顺带加上一个节流函数吧，也算是性能优化
      this.one.addEventListener(
        "scroll",
        _.throttle(
          function () {
            that.fn1(); // 85毫秒触发一次吧
          },
          85,
          {
            leading: true, //指定调用在节流开始前
            trailing: false, //指定调用在节流结束后,
          }
        )
      );
      // 同上...
      this.two.addEventListener(
        "scroll",
        _.throttle(
          function () {
            that.fn2();
          },
          85,
          {
            leading: true,
            trailing: false,
          }
        )
      );
    },
    // 3. 通过Element.scrollLeft属性 可以读取或设置元素滚动条到元素左边的距离
    fn1() {
      console.log("滚动条一 移动多少？", this.one.scrollLeft);
      this.two.scrollLeft = this.one.scrollLeft;
      /**
       * 加了节流函数以后，就会出现当我们滑动过快的时候，远小于定义节流时间所触发的间隔
       * 就会出现距离不准确问题，所以再加一个延时定时器重新更正（更新一下位置）
       * */
      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() {
    // 移除事件监听
    this.one.removeEventListener("scroll", this.fn1);
    this.one.removeEventListener("scroll", this.fn2);
  },
};
</script>

总结

到此这篇关于vue中el-table两个表尾合计行联动同步滚动条的文章就介绍到这了,更多相关vue el-table联动同步滚动条内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 滚动条 table

1024 个赞