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

Element UI implementiert mehrere Tabellen, die gleichzeitig horizontal und vertikal scrollen

Bildbeschreibung hier einfügen

Der Code lautet wie folgt:

<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')

Dies ist das Ende dieses Artikels zum synchronisierten Scrollen mehrerer Elementtabellen. Weitere Informationen zum synchronisierten Scrollen von Elementtabellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:

Lösen Sie das Problem des Ausblendens von Tabellenspalten in der Element-Benutzeroberfläche
Detaillierte Erläuterung der Schreibmethode der dynamischen Spaltendarstellung der VUE2.0 + ElementUI2.0-Tabelle el-table loop
Die coolen Operationen an Tabellen in Element-UI (Zusammenfassung)
Lösung für das Tabellenproblem in ElementUI
4 Möglichkeiten, den el-table-Stil von Element in Vue zu ändern
Detaillierte Erklärung der Zeitstempelformatierung von Tabellenspalten in der Element-Benutzeroberfläche von vue2.0
Verwenden der Slot-Scope-Methode der Element-UI-Tabelle

<<: Detaillierte Erklärung des Docker-Bereitstellungstutorials für Jenkins-Anfänger

>>: Erläuterung der Ausführungspriorität von mySQL-Schlüsselwörtern