共计 3535 个字符，预计需要花费 9 分钟才能阅读完成。
问题形容
最近产品提出一个需要，说是做表格出现统计数据，不过数据源是来自两个中央的，所以须要做两个表格去出现数据，同时在表格最初统计数据。
效果图
咱们先看一下效果图
思路
获取对应的两个表格设置滚动条的 dom，并通过 Element.scrollLeft 去设置滚动的间隔
官网文档：https://developer.mozilla.org…
滚动容器（审查元素即可得悉）：
残缺代码
本人演示的话，间接复制粘贴即可，代码中蕴含正文
<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>好忘性不如烂笔头，记录一下吧
^_^
正文完