テーブル内の要素のドラッグと並べ替えの問題について簡単に説明します

//テーブルのデフォルトのソート方法はIDの降順です。これを他の順序に変更することもできます。
    <el-table :data="tableData" :default-sort="{prop: 'ID', order: '降順'}">
      //sortable属性を設定すると、ソートボタンが表示されます <el-table-column prop="ID" label="座席番号" sortable>
    </el-table>

//sortable.js をインストール
NPM でインストール:

$ npm をインストール sortablejs --save

//コンポーネントに導入 import Sortable from 'sortablejs'

//ドラッグして並べ替える必要があるテーブルに ref 属性を追加します <el-table ref="dragTable">

//データレンダリング後にドラッグイベントを追加 created(){
   this.getBanner()
},
方法:{
 非同期getBanner(val){
          apiGetBanner() を待機します。その後 ((res)=>{
               this.bannerTable = res.data.data;
          })
         this.oldList = this.bannerTable.map(v => v.id);
         this.newList = this.oldList.slice();
         this.$nextTick(() => {
             this.setSort() //データのレンダリング後にメソッドを実行する})
    }
    ソートを設定する（）{
        定数el = this.$refs.dragTable.$el.querySelectorAll(
          '.el-table__body-wrapper > テーブル > tbody'
        )[0];
        this.sortable = Sortable.create(el, {
         // ドロッププレースホルダーのクラス名、
          ゴーストクラス: 'ソート可能なゴースト', 
                setData: 関数(データ転送) {
                dataTransfer.setData('テキスト', '')
            },
           //ドラッグが実行を終了し、evt はドラッグパラメータ onEnd を実行します: evt => {
              // 再ソートするかどうかを決定します if (evt.oldIndex !== evt.newIndex) {
                  データ = {
                     id:this.bannerTable[evt.oldIndex].id、
                     バナーオーダー:evt.newIndex
                  }
                  //データの送信に失敗した場合は、古いソートを復元します apiPutBanner(data).catch(()=>{
                     定数targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                     this.bannerTable.splice(evt.newIndex, 0, targetRow);
                  })
              }
            }
        })
    }
}

//行ドラッグ rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = これ
      ソート可能.create(tbody, {
        onEnd({ 新しいインデックス、 古いインデックス }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(新しいインデックス、0、currRow)
        }
      })
    },
    //列ドラッグcolumnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        アニメーション: 180,
        遅延: 0,
        onEnd: イベント => {
          定数 oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }