element ui plus 找不到bodyWrapper实现两个表格同步滚动的方法。

最新推荐文章于 2024-04-28 15:42:08 发布

不二家大哥哥

最新推荐文章于 2024-04-28 15:42:08 发布

阅读量1k

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_45266081/article/details/128285618

版权

	mounted() {
		
		this.dom1 = this.$refs.table1;
		this.dom2 = this.$refs.table2;

		this.dom1.$el.addEventListener("mouseover", (e) => {
			this.flag = false; // 此处的flag判断是否主动滚动了当前table
		this.dom2.$el.addEventListener("mouseover", (e) => {
			this.flag = true; // 此处的flag判断是否主动滚动了当前table
		
		});
		
	},

watch中监听触碰的是哪个表格

	watch: {
		flag(value) {
			console.log("flag", value);
			this.listenerScroll(value);
		},
	},

最后来同步滚动

	listenerScroll() {
			let that = this;
			if (this.flag == true) {
				//2滑动  赋值给1  true   el-scrollbar__wrap为饿了么的滚动条类名
				document
					.querySelectorAll(".el-scrollbar__wrap")[1]
					.addEventListener("scroll", () => {
						console.log(123);
						if (this.flag) {
							console.log(
								document.querySelectorAll(".el-scrollbar__wrap")[0].scrollLeft
							);
							//这个判断很重要
							that.dom1.setScrollLeft(
								document.querySelectorAll(".el-scrollbar__wrap")[1].scrollLeft
							);
						}
					});
			} else {
				//1滑动赋值给 el-scrollbar__wrap为饿了么的滚动条类名
				document
					.querySelectorAll(".el-scrollbar__wrap")[0]   
					.addEventListener("scroll", () => {
						if (!this.flag) {
							//这个判断很重要
							that.dom2.setScrollLeft(
								document.querySelectorAll(".el-scrollbar__wrap")[0].scrollLeft
							);
						}
					});
			}
		},