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. 如果用在子組件上，引用就指向組件實例：