Element tableドラッグ・ソートの問題について

ブログのアドレス:http://www.globm.top/blog/1/detail/41 最近ではelement tableを使用する場合、並べ替えの問題に遭遇することがよくありますが、簡単な並べ替えだけであれば、element公式で指定された方法が示されています

//table         ID                     order
    <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
      //  sortable         
      <el-table-column prop="ID" label="  " sortable>
    </el-table>

しかし、elementの公式コンポーネントはドラッグ・ソートをサポートしていません.ここではsortablejsがドラッグ・ソートを実現する機能を導入します.

sortablejs GitHubアドレス

//sortablejs     GitHub  
https://github.com/SortableJS/Sortable#readme

//  sortable.js
Install with NPM:

$ npm install sortablejs --save

//      
import Sortable from 'sortablejs'

//            ref  
<el-table  ref="dragTable">

//             
created(){
   this.getBanner()
},
methods:{
	async getBanner(val){
          await apiGetBanner().then((res)=>{
               this.bannerTable = res.data.data;
          })
         this.oldList = this.bannerTable.map(v => v.id);
         this.newList = this.oldList.slice();
         this.$nextTick(() => {
             this.setSort()  //          
         })
    }
    setSort() {
        const el = this.$refs.dragTable.$el.querySelectorAll(
        		'.el-table__body-wrapper > table > tbody'
        )[0];
        this.sortable = Sortable.create(el, {
        	// Class name for the drop placeholder,
        		ghostClass: 'sortable-ghost', 
                setData: function(dataTransfer) {
                dataTransfer.setData('Text', '')
            },
           //      ,evt       
           onEnd: evt => {
              //        
              if(evt.oldIndex !== evt.newIndex){
                  let data = {
                     id:this.bannerTable[evt.oldIndex].id,
                     banner_order:evt.newIndex
                  }
                  //             
                  apiPutBanner(data).catch(()=>{
                     const 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 = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //   
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }