千家信息网

element多个table如何实现同步滚动

发表于:2024-12-05 作者:千家信息网编辑
千家信息网最后更新 2024年12月05日,这篇文章给大家分享的是有关element多个table如何实现同步滚动的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。element ui 实现多个table同时滚动,横向纵
千家信息网最后更新 2024年12月05日element多个table如何实现同步滚动

这篇文章给大家分享的是有关element多个table如何实现同步滚动的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

element ui 实现多个table同时滚动,横向纵向滚动

代码如下:

var Main = {      data() {        return {          tableData: [{            date: '2016-05-02',            name: '王小虎',            address: '上海市'          }, {            date: '2016-05-04',            name: '王小虎',            address: '上海市'          }, {            date: '2016-05-04',            name: '王小虎',            address: '上海市'          }, {            date: '2016-05-04',            name: '王小虎',            address: '上海市'          }],          dom1: null,          dom2: null        }      },      mounted() {        this.dom1 = this.$refs.table1.bodyWrapper        this.dom2 = this.$refs.table2.bodyWrapper        this.listenerScroll()      },      methods: {        listenerScroll() {          this.dom2.addEventListener('scroll', () => {            // 横滚            this.dom1.scrollLeft = this.dom2.scrollLeft            // 竖滚            this.dom1.scrollTop = this.dom2.scrollTop          })        }      }    }var Ctor = Vue.extend(Main)new Ctor().$mount('#app')

感谢各位的阅读!关于"element多个table如何实现同步滚动"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

0