el-table拖拽排序

拖拽排序

拖拽后

设置row-key,这里暂时用的id，id是他们的唯一标识，不能用index，index是会变的

//安装组件
cnpm install sortablejs --save
//页面中引入
import Sortable from "sortablejs";

// 行拖拽
      rowDrop() {
       this.$nextTick(() => {
          this.sortable1 = Sortable.create(
            document.querySelector(".table-cont .el-table__body-wrapper tbody"),
            {
              handle: ".el-table__row",
              onEnd: ({ newIndex, oldIndex }) => {
                this.tableData.splice(
                  newIndex,
                  0,
                  this.tableData.splice(oldIndex, 1)[0]
                );
                var newArray = this.tableData.slice(0);
                this.tableData = [];
                this.$nextTick(function () {
                  this.tableData = newArray;
                  console.log('this.tableData',this.tableData)
                });
              },
            }
          );

        });
        
      },

//拖拽一下调用一次接口
// 行拖拽
      rowDrop() {
        this.$nextTick(() => {
          this.sortable1 = Sortable.create(
            document.querySelector(".table-cont .el-table__body-wrapper tbody"),
            {
              handle: ".el-table__row",
              onEnd: ({ newIndex, oldIndex }) => {
                let currRow=this.tableData.splice(oldIndex, 1)[0]
                this.tableData.splice(
                  newIndex,
                  0,
                  currRow
                );
                //拖拽一次调一次后台接口
                this.updateMove(newIndex,oldIndex,currRow)
              },
            }
          );

        });
      },
      updateMove(newIndex,oldIndex,currRow){
        //根据下标判断向上还是向下
        if(newIndex>oldIndex){//向下
          newIndex=newIndex-1;
        }else if(newIndex<oldIndex){//下
          newIndex=newIndex+1;
        }else{
          return; //没有变
        }
        let tableData=this.tableData;
        let insetData=tableData[newIndex];
        //调换顺序的两行
        console.log('insetData',insetData)
        console.log('currRow',currRow)；
        //调用接口就看后台需要怎么传参
      }