vue+element ui 列表行上下拖拽列表排序

1.下载 sortablejs 插件

npm install sortablejs

2.引入插件包

import Sortable from 'sortablejs'; // 列表拖拽插件

3.指定包裹容器的id

 <base-grid :data="tableData" :show-pagination="false" :loading="loading" row-key="placeGroupId">
        <el-table-column align="center" label="排序" width="100">
          <template slot-scope="">
            <i class="el-icon-s-fold"></i>
          </template>
        </el-table-column>
        <el-table-column label="楼层名称" prop="placeGroupName"></el-table-column>
        <el-table-column label="包含场所" prop="placeNameS"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <span class="c-main mr-10 pointer" @click="updateStorey(scope.row)">修改楼层</span>
            <span class="c-main mr-10 pointer" @click="onSelectPlace(scope.row)">选择场所</span>

          </template>
        </el-table-column>
      </base-grid>

  mounted(){
    this.drag();
  }

methods:{
    /**
     * @desc拖动
     * */
     drag () {
      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);
        //调用排序
          _this.setSortProjectLis();
        }
      });
    },
    /**
     * @desc产品排序
     * */
    setSortProjectLis(){
      let newData = [];
      this.tableData.forEach((item,i)=>{
        newData.push({
          orderNumber: i + 1,
          placeGroupId:item.placeGroupId
        });
      });
    //调用接口 传给后台
      updateOrderNumber(newData).then((res)=>{
        let { code,message } = res;
        if(code === 200){
          this.$notify({ title: '成功', message: '排序' + message, type: 'success' });
        }else {
    //更新列表数据
          this.getList();
          this.$notify.error( { title: '错误', message: message } );
        }
      });
    },
}