浅谈element关于table拖拽排序问题

//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order    <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">      //设置sortable属性时出现排序按钮      <el-table-column prop="ID" label="座号" sortable>    </el-table>

//安装sortable.jsInstall 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)        }      })    }