Eine kurze Diskussion zum Thema Ziehen und Sortieren von Elementen in Tabellen

//Die Standardsortiermethode der Tabelle ist die Sortierung nach ID in absteigender Reihenfolge. Sie können die Reihenfolge ändern, z. B.
    <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
      //Wenn das sortierbare Attribut festgelegt wird, wird die Sortierschaltfläche angezeigt <el-table-column prop="ID" label="Sitzplatznummer" sortierbar>
    </el-Tabelle>

//Installieren Sie sortable.js
Mit NPM installieren:

$ npm installiere sortablejs --save

//In die Komponente importiere Sortable from 'sortablejs'

//Fügen Sie der Tabelle, die gezogen und sortiert werden muss, ein Ref-Attribut hinzu <el-table ref="dragTable">

//Drag-Ereignis hinzufügen, nachdem das Rendern der Daten erstellt wurde(){
   dies.getBanner()
},
Methoden:{
 async getBanner(Wert){
          warte auf apiGetBanner().then((res)=>{
               diese.bannerTable = res.data.data;
          })
         diese.alteListe = diese.bannerTable.map(v => v.id);
         diese.neueListe = diese.alteListe.slice();
         dies.$nextTick(() => {
             this.setSort() //Methode nach Datenrendering ausführen})
    }
    setzeSort() {
        const el = this.$refs.dragTable.$el.querySelectorAll(
          „.el-table__body-wrapper > Tabelle > tbody“
        )[0];
        dies.sortable = Sortable.create(el, {
         // Klassenname für den Drop-Platzhalter,
          ghostClass: "sortierbarer Geist", 
                setData: Funktion(Datentransfer) {
                dataTransfer.setData('Text', '')
            },
           //Drag beendet die Ausführung, evt führt den Drag-Parameter onEnd aus: evt => {
              //Festlegen, ob neu sortiert werden soll, wenn (evt.oldIndex !== evt.newIndex) {
                  lass Daten = {
                     id:this.bannerTable[evt.alterIndex].id,
                     banner_order:evt.newIndex
                  }
                  //Wenn die Datenübertragung fehlschlägt, stellen Sie die alte Sortierung wieder her apiPutBanner(data).catch(()=>{
                     const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                     this.bannerTable.splice(evt.newIndex, 0, targetRow);
                  })
              }
            }
        })
    }
}

//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)
        }
      })
    }