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

作者:水冗水孚 时间:2023-07-02 17:08:56 

问题描述

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

效果图

我们先看一下效果图

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

思路

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

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

滚动容器(审查元素即可得知):

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

完整代码

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

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

来源:https://juejin.cn/post/7096320046305607716

标签:el-table,滚动条,同步
0
投稿

猜你喜欢

  • OpenCV-Python实现图像梯度与Sobel滤波器

    2021-04-07 05:23:20
  • Laravel框架实现利用监听器进行sql语句记录功能

    2024-05-13 09:53:49
  • 关于antd-vue a-menu菜单绑定路由的相关问题

    2023-07-02 16:33:12
  • 如何用ASP.NET连接MS SQLServer数据库?

    2010-06-11 19:27:00
  • Python列表的索引与切片

    2022-11-17 13:06:19
  • javascript中的toFixed固定小数位数 简单实例分享

    2024-05-21 10:20:28
  • 一个很棒的js图片代码

    2009-12-17 18:36:00
  • python tornado微信开发入门代码

    2023-11-01 01:04:59
  • Python 中创建 PostgreSQL 数据库连接池

    2024-01-19 22:33:37
  • 在Oracle中向视图中插入数据的方法

    2009-02-28 10:42:00
  • python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析

    2022-12-17 22:26:30
  • golang 获取字符串长度的案例

    2024-04-27 15:40:47
  • MySQL 5.7.16 修改密码提示 ERROR 1054 (42S22): Unknown column ''password'' in ''field list''的原因

    2024-01-20 02:43:33
  • first-letter的一个小妙用

    2010-03-20 21:47:00
  • Python使用代理抓取网站图片(多线程)

    2023-06-25 17:34:50
  • Oracle Session每日统计功能实现

    2023-07-22 09:47:24
  • python实现逻辑回归的方法示例

    2021-07-27 17:04:24
  • SQL Server数据库导入MySQL数据库体验

    2009-01-20 16:07:00
  • Python 中导入csv数据的三种方法

    2022-02-24 10:12:10
  • 关于Ajax responseText 中文乱码问题

    2008-02-12 16:30:00
  • asp之家 网络编程 m.aspxhome.com