vue中el-table两个表尾合计行联动同步滚动条实例代码
作者:水冗水孚 发布时间:2023-07-02 17:08:56
标签:el-table,滚动条,同步
问题描述
最近产品提出一个需求,说是做表格呈现统计数据,不过数据源是来自两个地方的,所以需要做两个表格去呈现数据,同时在表格最后统计数据。
效果图
我们先看一下效果图
思路
获取对应的两个表格设置滚动条的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>
来源:https://juejin.cn/post/7096320046305607716
0
投稿
猜你喜欢
- Python语言有一种独特的推导式语法,相当于语法糖的存在,可以帮助你在某些场合写出较为精简酷炫的代码。但没有它,也不会有太多影响。Pyth
- 在使用pytorch训练模型,经常需要加载大量图片数据,因此pytorch提供了好用的数据加载工具Dataloader。为了实现小批量循环读
- 整理了一些JS的常用方法,包括验证啊,全选反选啊,ajax请求啊之类的,因为就是自己用的,写的都比较简单,就算抛砖引玉吧,喜欢的就拿去,不喜
- 1. Jupyter 默认目录调整首先要找到jupyter生成的配置文件 jupyter_notebook_config.py 。如果没有,
- 在服务端程序开发的过程中,cookie经常被用于验证用户登录。golang 的 net/http 包中自带 http cookie的定义,下
- Oracle数据库在使用的过程中常常会遇到这样或那样的问题,而这些问题常常又使我们感到很困惑,本文我们总结了Oracle数据库在使用过程中的
- 这篇文章主要介绍了python next()和iter()函数原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- mysql数据库里,对一个已创建的表进行DDL操作,比如说添加一个字段。在做测试时,发现ddl操作的时间特别的长。
- 今天训练faster R-CNN时,发现之前跑的很好的程序(是指在运行程序过程中,显卡利用率能够一直维持在70%以上),今天看的时候,显卡利
- 目录1.根据默认的行列索引操作1.1行删除1.2列删除2.根据自定义的行列索引操作2.1行删除2.2列删除本文介绍Pandas中DataFr
- mysql设置某字段不能重复alter table novel.novelsort add unique(name);novel是数据库 n
- plt是最常用的接口1. 画图的基本步骤1.导入模块import matplotlib as mplimport matplotlib.py
- PHP在运行时, 针对严重程度不同的错误,会给以不同的提示。 eg:在$a没声明时,直接相加,值为NULL,相加时当成0来算.但是,却提示N
- 1.配置需要python3.7,Chrome或者Edeg浏览器,Chrome驱动或者Edge驱动#需要配置selenium库,baidu-a
- 1.字符串函数 长度与分析用 datalength(Char_expr) 返回字符串包含字符数,但不包含后
- 解决MAC下MySQL忘记初始密码的方法分享给大家,供大家参考,具体内容如下第一步:点击系统偏好设置->最下边点MySQL,在弹出页面
- 本章给大家在项目使用时候,常见的一种情况解决案例,即是当我们调用多个线程,使用了同一个函数去处理数据的时候,有些用函数已经处理完成,但是有些
- Python写入Excel有时需要合并单元格、或者改变文字内容的颜色首先导入xlwt模块import xlwt创建文件名创建Excel工作簿
- 本文实例讲述了Python实现的矩阵类。分享给大家供大家参考,具体如下:科学计算离不开矩阵的运算。当然,python已经有非常好的现成的库:
- 目录1. matplotlib 模块概述2. matplotlib.pyplot 相关方法3. matplotlib.pyplot 图表展示