同期スクロールを実現するための複数のテーブル要素のサンプルコード

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="アプリ">
<テンプレート>
    <el-テーブル
      ref="テーブル1"
      境界線="10"
      高さ="150"
      :data="テーブルデータ"
      スタイル="幅: 800px">
      <el-テーブル列
        プロパティ="日付"
        label="日付"
        幅="300">
      </el-table-column>
      <el-テーブル列
        プロパティ="名前"
        label="名前"
        幅="300">
      </el-table-column>
      <el-テーブル列
        幅="300px"
        prop="アドレス"
        label="住所">
      </el-table-column>
            <el-テーブル列
        幅="300px"
        prop="アドレス"
        label="住所">
      </el-table-column>
    </el-table>
    <br/>
    <el-テーブル
      ref="テーブル2"
      境界線="10"
      高さ="150"
      :data="テーブルデータ"
      スタイル="幅: 800px">
      <el-テーブル列
        プロパティ="日付"
        label="日付"
        幅="300">
      </el-table-column>
      <el-テーブル列
        プロパティ="名前"
        label="名前"
        幅="300">
      </el-table-column>
      <el-テーブル列
        幅="300px"
        prop="アドレス"
        label="住所">
      </el-table-column>
            <el-テーブル列
        幅="300px"
        prop="アドレス"
        label="住所">
      </el-table-column>
    </el-table>
  </テンプレート>
</div>

var メイン = {
      データ（） {
        戻る {
          テーブルデータ: [{
            日付: '2016-05-02'、
            名前: 王小湖、
            住所: '上海'
          }, {
            日付: '2016-05-04'、
            名前: 王小湖、
            住所: '上海'
          }, {
            日付: '2016-05-04'、
            名前: 王小湖、
            住所: '上海'
          }, {
            日付: '2016-05-04'、
            名前: 王小湖、
            住所: '上海'
          }],
          dom1: ヌル、
          dom2: ヌル
        }
      },
      マウント() {
        this.dom1 = this.$refs.table1.bodyWrapper
        this.dom2 = this.$refs.table2.bodyWrapper

        this.listenerScroll()
      },
      メソッド: {
        リスナースクロール() {
          this.dom2.addEventListener('スクロール', () => {
            // スクロール this.dom1.scrollLeft = this.dom2.scrollLeft
            // 垂直スクロール this.dom1.scrollTop = this.dom2.scrollTop
          })
        }
      }
    }
var Ctor = Vue.extend(Main)
新しい Ctor().$mount('#app')