问题描述
element-admin中同时使用多个table,要求头部固定,给每个并列的table设置max-height,通过监听一侧的table滚动情况去控制另外一侧的table滚动。
问题分析
table分成两部分,左侧是一个table,右侧是有去掉头部的多个table组成(动态生成),想要实现双向滚动要完成3个任务。
- 左侧滚动控制右侧同步滚动
- 右侧一个滚动控制右侧所有同步滚动
- 右侧滚动控制左侧同步滚动
解决问题
重点:通过mouseover事件来开启/停止当前鼠标所在区域的scroll事件,因为同步滚动只能一边跟随另一边滚动,否则两边相互影响会导致滚动条滚动滞留现象。
-
左侧table,若是在不同组件传值可以用vuex
mounted(){ let bodyWrapper = this.$refs.floorTableRef.bodyWrapper bodyWrapper.addEventListener('mouseover', (e) => { this.flag = true // 此处的flag判断是否主动滚动了当前table bodyWrapper.addEventListener('scroll', (evt) => { if(this.flag) { this.scrollTop = evt.target.scrollTop } }) }) }
// 设置滚动高度 initScroll(val) { this.$nextTick(() => { let bodyWrappers = document.querySelector('.h-table .el-table__body-wrapper'); bodyWrappers.scrollTop = val }) },
-
右侧多table
mounted() { // 监听事件 let bodyWrappers = document.querySelectorAll('.h-table2 .el-table__body-wrapper'); // 监听鼠标是否在当前table,此处也可以监听一个所有table的父元素 bodyWrappers.forEach((item) => { item.addEventListener('mouseover', (evt) => { this.flag = false }) }) // 主动滚动就赋值,否知不赋值 bodyWrappers.forEach((item) => { item.addEventListener('scroll', (evt) => { if(!this.flag) { this.uscrollTop = evt.target.scrollTop } }, true) }) }, methods: { // 设置滚动高度 initScroll(val) { this.$nextTick(() => { let bodyWrappers = document.querySelectorAll('.h-table2 .el-table__body-wrapper'); bodyWrappers.forEach((item) => { item.scrollTop = val }) }) } }
衍生问题
右侧的table出现不能滚动到底部的问题待解决。。