Sortable实现table拖拽功能

<el-table ref="sourceTable" row-key="programid" class="tableList"  :data="resourceData" v-if="resourceData.length > 0"   size="small" @selection-change="selectionChange" >

        <el-table-column type="selection" width="50"></el-table-column>

        <el-table-column type="index" :index="setIndex()" label="序号" width="50" show-overflow-tooltip></el-table-column>

        <el-table-column prop="programid" width="100" label="节目ID"  show-overflow-tooltip></el-table-column>

        <el-table-column prop="name" label="节目名称"  show-overflow-tooltip></el-table-column>

        <el-table-column prop="source" width="100"  label="提供商"  show-overflow-tooltip></el-table-column>

        <el-table-column prop="contenttype" width="100"  label="类型"  show-overflow-tooltip>

          <template v-slot="{row}">{{contentMap[row.contenttype]||''}}</template>

        </el-table-column>

        <el-table-column  label="操作" width="180">

          <template v-slot="{row,$index}">

            <div class="action">

              <span @click="moveProgram(1,row.programid)"  v-if="!($index===0 && pageData.currentPage===1)">置顶</span>

              <span @click="addAndReplace(row,$index)">替换</span>

              <span @click="getProgramInfo(row)">属性</span>

              <span @click="deleteResourse(row)">删除</span>

            </div>

          </template>

        </el-table-column>

      </el-table>

 

1、npm 安装

2、import Sortable from 'sortablejs';

3、注意rowDrop一定要在mounted钩子函数，即html元素加载完毕

//行拖拽

    rowDrop() {     

      const tbody = document.querySelector(".tableList .el-table__body-wrapper tbody");

      if(tbody){

        Sortable.create(tbody, {

            onEnd: ({ newIndex, oldIndex }) => {//这里我使用的是拖拽完毕去调用move接口

                if (newIndex !== oldIndex) {

                    const currRow = this.resourceData.splice(oldIndex, 1)[0];

                    this.resourceData.splice(newIndex, 0, currRow); //数据互换位置

                    const { currentPage, size } = this.pageData,

                        index = newIndex + 1 + (currentPage - 1) * size;

                    this.moveProgram(index, currRow.programid); //发送换位置的请求

                }

            }

        });

      }

    },

 

//这里重点说一定要设置row-key，掉坑里了，拖拽完表格顺序不对，找不出原因，最后发现没有设置row-key，其他应用参考官网sortable