el-table增加顶部滚动条，表格实现上下双滚动条

效果图：

实现方式：

1.加一个div,宽度和表格相同：

初始宽度：width:0

2.监听表格宽度，并给元素和滚动条元素绑定滚动事件：
原理：两个滚动条滚动时，同时控制另一个滚动条滚动。

表格上下滚动条监听滚动距离  上下滚动条 ---滚动距离双向绑定

html：  

 <div class="top-scroll" ref="topScroll">
      <div class="top-scroll-content" :style="tableWidth">&nbsp;</div>
 </div>
 <el-table ref="tableData2" :data="tableData" class="e-table"  @selection-change="handleSelectionChange" v-loading="listLoading" :header-cell-style="{background: '#F4F8F9',font: 'bolder'}" :row-class-name="tableRowClassName" height="400">
 
 </el-table>

data 初始数据   宽度

  data () {
      return {
        tableWidth:{
          width:0
        },
      }
    },

// 获取数据表格下滚动条滚动宽度
          setTimeout(()=>{
            this.tableWidth.width=this.$refs.tableData2.bodyWrapper.scrollWidth+"px";
          },500)

注意  ref 绑定

     ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

1. 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

2. 如果用在子组件上，引用就指向组件实例：