element table拖拽排序sortable.js

npm install sortablejs --save

官网
http://www.sortablejs.com/index.html
配置项
http://www.sortablejs.com/options.html

<el-table 
        :data="tableData"
        border
        row-key="id"
        :cell-style="tableCellStyle"
        ></el-table>

//行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        forceFallback: true,
        handle:".move",
        draggable:'.el-table__row', // 允许拖拽的项目类名
        onMove:(customEvent)=> {
	          // 禁止在拖拽过程中交换位置
	          // 可将初始位置及目标位置进行记录
	          _this.oldIndex = customEvent.dragged.rowIndex; //  初始位置
	          _this.newIndex = customEvent.related.rowIndex; // 目标位置
            console.log(_this.oldIndex,_this.newIndex)
	          // return false;  // 不进行交换
	          // 返回值有三个
	          // return false; — for cancel
	          // return -1; — insert before target
	          // return 1; — insert after target
	        },
        onEnd:({newIndex, oldIndex})=> {
          console.log('拖拽完成，初始位置及目标位置重置',newIndex, oldIndex)
          // 拖拽完成，初始位置及目标位置重置
          _this.newIndex = null;
          _this.oldIndex = null;
          // const { newIndex, oldIndex } = _this;
          if(newIndex === oldIndex){
            return
          }
          
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
          
          _this.tableData.forEach((item,index)=>{
            item.sortCode = index
          })
          
          this.changeSave()
        }
      })
    },

//解决拖动项宽度失效
tableCellStyle({row, column, rowIndex, columnIndex}){
      return{
        'width':column.realWidth+'px'
      }
    },