拖拽表格组件：

<!-- 拖拽排序表格 -->
<template>
  <div ref="wrapper">
    <div :key="tableKey">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import sortable from "sortablejs";

export default {
  name: "ElTableDraggable",
  props: {
    handle: {
      type: String,
      default: ""
    },
    animate: {
      type: Number,
      default: 100
    }
  },
  data () {
    return {
      tableKey: 0,
      tableObj: undefined,
    };
  },
  methods: {
    //修改参数 目前只用来修改是否可拖拽了
    changeOption (name, value) {
      this.tableObj.option(name, value)
    },
    //初始化
    makeTableSortAble () {
      const table = this.$children[0].$el.querySelector(
        ".el-table__body-wrapper tbody"
      );
      this.tableObj = sortable.create(table, {
        handle: this.handle,
        animation: this.animate,
        //拖拽结束将新的排序数组传回给父组件
        onEnd: ({ newIndex, oldIndex }) => {
          this.keepWrapperHeight(true);
          this.tableKey = Math.random();
          const arr = this.$children[0].data;
          const targetRow = arr.splice(oldIndex, 1)[0];
          arr.splice(newIndex, 0, targetRow);
          this.$emit("drop", { targetObject: targetRow, list: arr });
        }
      });
    },
    keepWrapperHeight (keep) {
      // eslint-disable-next-line prefer-destructuring
      const wrapper = this.$refs.wrapper;
      if (keep) {
        wrapper.style.minHeight = `${wrapper.clientHeight}px`;
      } else {
        wrapper.style.minHeight = "auto";
      }
    }
  },
  mounted () {
    this.makeTableSortAble();
  },
  watch: {
    //每次拖拽都重新初始化
    tableKey () {
      this.$nextTick(() => {
        this.makeTableSortAble();
        this.keepWrapperHeight(false);
      });
    }
  }
};
</script>

父组件引用：

<template>
    <el-table-draggable
              :animate="300"
              ref="el-table-draggable"
              @drop="dropTable"
              
            >
            
              <el-table
                :data="upList"
                empty-text="暂无上架商品"
                ref="multipleTable"
                class="ele-table-default-head product-drag-table"
                @select="selectChange"
                @select-all="selectChange"
              >
                <el-table-column
                  type="selection"
                  width="110"
                  fixed="right"
                  align="center"
                  label-class-name="DisabledSelection"
                >

                </el-table-column>
                <el-table-column
                  label="状态"
                  prop="channelItem"
                  align="center"
                  width="80"
                  >
                <template slot-scope="{row}">
                  <span>已上架</span>
                </template>
              </el-table-column>
                <el-table-column
                  label="渠道商品编码"
                  prop="channelItem"
                  align="center"
                  width="110"
                >
                </el-table-column>
                <el-table-column
                  label="渠道商户"
                  prop="channelName"
                  align="center"
                  width="110"
                >
                </el-table-column>
                <el-table-column
                  prop="name"
                  align="center"
                  label="商品名称"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  label="规格型号"
                  prop="specificationName"
                  align="center"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  label="价格(元)"
                  prop="realPrice"
                  align="center"
                  v-if="productType==4"
                  width="70"
                >
                </el-table-column>
                
              </el-table>
            
            </el-table-draggable>
</template>
<script>
import ElTableDraggable from '@/components/Sortable/ElTableDraggable'
export default {
data(){
    return{
        checkedUpIds: [],//选中的id合集
        checkedUpList: [],//选中的数据
        upList: [],//全部数据
    }
},
methods:{
//拖拽完毕的回调 因为每次拖拽会重新初始化列表 所以需要将拖拽前选中的数据重新选中 
    dropTable (obj) {
      this.$nextTick(() => {
        obj.list.forEach((element) => {
          //在选中列表里的再去遍历
          if (this.checkedUpIds.indexOf(element.id) != -1) {
            //还得用原始数据才能选中
            this.upList.forEach(element1 => {
              if (element1.id== element.id) {
                this.$refs.multipleTable.toggleRowSelection(element1, true);
              }
            })
          }

        })
      })
    },
    //选中/取消选中事件
    selectChange (selection, row) {
      this.checkedUpList = selection
      if (row) {
        //判断是选中还是取消选中
        let selected = selection.length && selection.indexOf(row) !== -1;
        if (selected) {
          this.checkedUpIds.unshift(row.productSku)
        } else {
          this.checkedUpIds.splice(this.checkedUpIds.indexOf(row.id), 1)
        }
      } else {
        //全选
        if (selection.length) {
          this.checkedUpIds = []
          selection.forEach(element => {
            this.checkedUpIds.push(element.id)
          })
        } else {
          //全不选
          this.checkedUpIds = []
        }
      }
    },
    
  }
}
</script>