使用element-ui+sortablejs实现表格的拖拽排序

拖拽表格组件：

<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>

父组件引用：

<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>