拖拽排序表格(sortable)

    <!--html-->
    <el-table class="margin-medium-top table" 
          :cell-style="{'text-align':'center'}"
          :data="tableData"
          border
          :header-cell-style="headerCellStyle"
          style="width: 100%"
          v-loading="loadingTable">
                <el-table-column prop="universityName" label="院校名称">
                </el-table-column>
                <el-table-column prop="cityName" label="院校所在地">
                </el-table-column>
                <el-table-column prop="level" label="培养层次">
                </el-table-column>
                <el-table-column prop="" label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button  type="text"  class="cz el-icon-rank"  ></el-button>
                        </div>
                    </template>
                </el-table-column>
    </el-table>

<script>
    import Sortable from 'sortablejs' //下载包yarn add sortablejs
    export default {
        mounted(){
        //因为sortable是监听的元素所以需要等待元素渲染完成后再执行此方法
            this.$nextTick(()=>{
            this.drag();
        })
    },
    methods:{
        drag(){
            // 设置要拖拽元素的父容器
            const tbody = document.querySelector('.el-table__body-wrapper tbody');
            const _this = this;
            Sortable.create(tbody, {
           //设置父元素下可拖拽的子元素
              draggable: ".el-table__row",
              handle:'.el-icon-rank',  //指定只能选中此类名的元素才可进行拖动el-table__row
              //拖动结束鼠标松开触发此事件
              onEnd ({ newIndex, oldIndex }) {
                   const currRow = _this.tableData.splice(oldIndex, 1)[0];
                  _this.tableData.splice(newIndex, 0, currRow);
                  let zhi = [];
                  //接收排序后的table内容获取table相关的id数组
                  _this.tableData.forEach((val) => {
                       zhi.push(val.logId);
                  });
                //传给后端接口，执行排序
                  _this.commonProfessionSortJk(zhi);
                }
             });
          },
          //执行排序接口
          async commonProfessionSortJk(val) {
            let result = await volunteerListOrderBy(val);
            if (result.status){
                //重新查询此列表内容
               this.volunteerList();
            }
           },
          //列表内容
          async volunteerList(){
           this.loadingTable=true;
           this.tableData=[];
           let result=await volunteerList();
           if(result.status){
             this.loadingTable=false;
             this.tableData=result.data;
             //（此注释不必在意只关注上方代码即可）重新追加sortId，（通过此id设置向上向下效果）
             for(let i=0;i<this.tableData.length;i++){
               this.tableData[i].sortId=i+1;
             }
             console.log('我是查出的志愿表');
             console.log(this.tableData);
            }else{
               this.loadingTable=false;
            }
        }
     }
  </script>