Beispielcode für mehrere Elementtabellen, um synchrones Scrollen zu erreichen

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<Vorlage>
    <el-Tabelle
      ref="Tabelle1"
      Grenze="10"
      Höhe="150"
      :data="Tabellendaten"
      Stil="Breite: 800px">
      <el-table-column
        prop="Datum"
        Bezeichnung="Datum"
        Breite="300">
      </el-Tabellenspalte>
      <el-table-column
        Eigenschaft = "Name"
        Bezeichnung="Name"
        Breite="300">
      </el-Tabellenspalte>
      <el-table-column
        Breite="300px"
        prop="Adresse"
        label="Adresse">
      </el-Tabellenspalte>
            <el-table-column
        Breite="300px"
        prop="Adresse"
        label="Adresse">
      </el-Tabellenspalte>
    </el-Tabelle>
    <br/>
    <el-Tabelle
      ref="Tabelle2"
      Grenze="10"
      Höhe="150"
      :data="Tabellendaten"
      Stil="Breite: 800px">
      <el-table-column
        prop="Datum"
        Bezeichnung="Datum"
        Breite="300">
      </el-Tabellenspalte>
      <el-table-column
        Eigenschaft = "Name"
        Bezeichnung="Name"
        Breite="300">
      </el-Tabellenspalte>
      <el-table-column
        Breite="300px"
        prop="Adresse"
        label="Adresse">
      </el-Tabellenspalte>
            <el-table-column
        Breite="300px"
        prop="Adresse"
        label="Adresse">
      </el-Tabellenspalte>
    </el-Tabelle>
  </Vorlage>
</div>

var Haupt = {
      Daten() {
        zurückkehren {
          Tabellendaten: [{
            Datum: '2016-05-02',
            Name: 'Wang Xiaohu',
            Adresse: 'Shanghai'
          }, {
            Datum: '2016-05-04',
            Name: 'Wang Xiaohu',
            Adresse: 'Shanghai'
          }, {
            Datum: '2016-05-04',
            Name: 'Wang Xiaohu',
            Adresse: 'Shanghai'
          }, {
            Datum: '2016-05-04',
            Name: 'Wang Xiaohu',
            Adresse: 'Shanghai'
          }],
          dom1: null,
          dom2: null
        }
      },
      montiert() {
        dies.dom1 = dies.$refs.table1.bodyWrapper
        dies.dom2 = dies.$refs.table2.bodyWrapper

        dies.listenerScroll()
      },
      Methoden: {
        listenerScroll() {
          this.dom2.addEventListener('scroll', () => {
            // Scrollen this.dom1.scrollLeft = this.dom2.scrollLeft
            // Vertikales Scrollen this.dom1.scrollTop = this.dom2.scrollTop
          })
        }
      }
    }
var Ctor = Vue.extend(Main)
neuer Ctor().$mount('#app')