Beispiel für die Implementierung des Ziehens von Zeilen und Spalten in einer Elementtabelle

npm installiere sortablejs --save

Sortable aus „sortablejs“ importieren

<Vorlage>
  <div Stil="Breite:800px">

    <el-table :data="Tabellendaten"
      Grenze
      Zeilenschlüssel="id"
      ausrichten="links">
     <el-table-column v-for="(Element, Index) in Spalte"
        :Schlüssel="`col_${index}`"
        :prop="Abwurfspalte[index].prop"
        :label="Artikel.label"> 
      </el-Tabellenspalte>
    </el-Tabelle>
    <pre style="text-align: left">
      {{dropCol}}
    </pre>
    <hr>
    <pre style="text-align: left">
      {{tableData}}
    </pre>
  </div>
</Vorlage>
<Skript>
Sortable aus „sortablejs“ importieren
Standard exportieren {
  Daten() {
    zurückkehren {
      Spalte: [
        {
          Bezeichnung: 'Datum',
          Requisite: "Datum"
        },
        {
          Bezeichnung: 'Name',
          Requisite: "Name"
        },
        {
          Bezeichnung: 'Adresse',
          Requisite: "Adresse"
        }
      ],
      Spalte löschen: [
        {
          Bezeichnung: 'Datum',
          Requisite: "Datum"
        },
        {
          Bezeichnung: 'Name',
          Requisite: "Name"
        },
        {
          Bezeichnung: 'Adresse',
          Requisite: "Adresse"
        }
      ],
      Tabellendaten: [
        {
          ID: '1',
          Datum: '2016-05-02',
          Name: „Geburtstagsgeschenk 1“,
          Adresse: „Nr. 100, Jinshajiang Road, Bezirk Putuo, Shanghai“
        },
        {
          ID: '2',
          Datum: '2016-05-04',
          Name: „王小虎2“,
          Adresse: „Nr. 200, Jinshajiang Road, Bezirk Putuo, Shanghai“
        },
        {
          ID: '3',
          Datum: '2016-05-01',
          Name: „王小虎3“,
          Adresse: „Nr. 300, Jinshajiang Road, Bezirk Putuo, Shanghai“
        },
        {
          ID: '4',
          Datum: '2016-05-03',
          Name: „王小虎4“,
          Adresse: „Nr. 400, Jinshajiang Road, Bezirk Putuo, Shanghai“
        }
      ]
    }
  },
  montiert() {
    dies.rowDrop()
    diese.columnDrop()
  },
  Methoden: {
    //Zeile ziehen rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = dies
      Sortable.create(tbody, {
        amEnde({ neuerIndex, alterIndex }) {
          const currRow = _this.tableData.splice(alterIndex, 1)[0]
          _this.tableData.splice(neuerIndex, 0, aktuelleZeile)
        }
      })
    },
    //Spalte ziehen columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      dies.sortable = Sortable.create(wrapperTr, {
        Animation: 180,
        Verzögerung: 0,
        am Ende: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.alterIndex, 1)
          this.dropCol.splice(evt.neuerIndex, 0, altesElement)
        }
      })
    }
  }
}
</Skript>
<Stilbereich>
</Stil>