element多个table实现同步滚动的示例代码
更新时间:2021年9月29日 12:00 点击:1476
element ui 实现多个table同时滚动,横向纵向滚动
代码如下:
<script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="http://unpkg.com/element-ui@2.15.6/lib/index.js"></script> <div id="app"> <template> <el-table ref="table1" border="10" height="150" :data="tableData" style="width: 800px"> <el-table-column prop="date" label="日期" width="300"> </el-table-column> <el-table-column prop="name" label="姓名" width="300"> </el-table-column> <el-table-column width="300px" prop="address" label="地址"> </el-table-column> <el-table-column width="300px" prop="address" label="地址"> </el-table-column> </el-table> <br/> <el-table ref="table2" border="10" height="150" :data="tableData" style="width: 800px"> <el-table-column prop="date" label="日期" width="300"> </el-table-column> <el-table-column prop="name" label="姓名" width="300"> </el-table-column> <el-table-column width="300px" prop="address" label="地址"> </el-table-column> <el-table-column width="300px" prop="address" label="地址"> </el-table-column> </el-table> </template> </div>
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实现同步滚动的文章就介绍到这了,更多相关element table同步滚动内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: js中的赋值 浅拷贝和深拷贝详细
下一篇: vue实现表单验证小功能
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 这篇文章主要介绍了C# 遍历datatable字段名和value的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-19
- 将List类型转换成DataTable的通用方法,大家参考使用吧...2020-06-25
- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
- 这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-29- 本文主要介绍了vue+element实现动态换肤的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
- 这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-10
- 这篇文章主要介绍了C#获取变更过的DataTable记录的实现方法,对初学者很有学习借鉴价值,需要的朋友可以参考下...2020-06-25