Vue 两个el-table合并同时横向滚动

跳跳的小古风

已于 2022-10-11 11:21:02 修改

阅读量353

点赞数 1

分类专栏： Vue 文章标签： javascript

于 2021-10-15 10:57:23 首次发布

本文链接：https://blog.csdn.net/weixin_43787651/article/details/120779357

版权

Vue 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

//给两个table 绑定ref属性
  scroll () {
      let table1 = this.$refs.table1.bodyWrapper // 上表格
      let table2 = this.$refs.table2.bodyWrapper // 下表格
      table2.addEventListener('scroll', () => {
        // 滚动监听事件
        table1.scrollLeft = table2.scrollLeft
        this.$nextTick(() => {
       // 表格滚动时有一定概率发生错位，这里使用doLayout方法，来解决重新布局的问题
          this.$refs.table1.doLayout()
          this.$refs.table2.doLayout()
        })
      })
//然后隐藏上面子表格的滚动条即可 
<style lang="less">
  .Tableone
    ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb{
      display none
      }
</style>