element中table无缝滚动,el-table无限滚动
本文主要介绍了元素多个桌子实现同步滚动，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
元素用户界面实现多个桌子同时滚动，横向纵向滚动
代码如下：
脚本src=//un pkg。com/vue/dist/vue。js /脚本
脚本src=//un pkg。com/element-ui @ 2。15 .6/库/索引。js /脚本
div id=应用程序
模板
埃尔表
ref=表1
border=10
身高=150
:data=tableData
style=width: 800px
埃尔-表格-列
prop=date
标签=日期
宽度=300
/El-表格-列
埃尔-表格-列
prop=name
标签=姓名
宽度=300
/El-表格-列
埃尔-表格-列
宽度= 300像素
prop=地址
标签=地址
/El-表格-列
埃尔-表格-列
宽度= 300像素
prop=地址
标签=地址
/El-表格-列
/el-table
br/
埃尔表
ref=表2
border=10
身高=150
:data=tableData
style=width: 800px
埃尔-表格-列
prop=date
标签=日期
宽度=300
/El-表格-列
埃尔-表格-列
prop=name
标签=姓名
宽度=300
/El-表格-列
埃尔-表格-列
宽度= 300像素
prop=地址
标签=地址
/El-表格-列
埃尔-表格-列
宽度= 300像素
prop=地址
标签=地址
/El-表格-列
/el-table
/模板
/div
var Main={
data() {
返回{
表数据：[{
日期："2016年5月2日",
名称： 王小虎，
地址： 上海市
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市
}],
dom1: null，
dom2:空
}
},
已安装(){
this.dom1=this .$refs.table1.bodyWrapper
this.dom2=this .$refs.table2.bodyWrapper
this.listenerScroll()
},
方法：{
listenerScroll() {
这个。DOM 2。addevent侦听器( scroll ，()={
//横滚
这个。DOM 1。向左滚动=这个。DOM 2。向左滚动
//竖滚
这个。DOM 1。向上滚动=这个。DOM 2。滚动顶部
})
}
}
}
var Ctor=Vue.extend(主)
新的Ctor().$ mount("# app ")
到此这篇关于元素多个桌子实现同步滚动的文章就介绍到这了，更多相关元素表同步滚动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。