element+sortablejs實現表格托拽

最終實現效果：

js 部分實現

import Sortable from 'sortablejs';//引入sortablejs


//1.請求數據后使用托拽方法
this.$nextTick(() => {
        this.setSort();
});
//2. 托拽方法
 // 初始化拖拽
 setSort() {
  console.log(this.$refs.rightTable);
  const el = this.$refs.rightTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
  let _this = this;
  this.sortable = Sortable.create(el, {
   animation: 150,  // ms, number 單位：ms，定義排序動畫的時間
    //  指定父元素下可被拖拽的子元素
   draggable: '.el-table__row',
   onEnd({ newIndex, oldIndex }) {
    console.log('TabsTreeTable -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    let rightTableData = cloneDeep(_this.rightTableData);
    const currRow = rightTableData.splice(oldIndex, 1)[0];
    rightTableData.splice(newIndex, 0, currRow);
    _this.rightTableData = rightTableData;
    _this.rightOriginData = cloneDeep(rightTableData);
   },
   ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
   setData: function(dataTransfer) {
    // to avoid Firefox bug
    // Detail see : https://github.com/RubaXa/Sortable/issues/1012
    dataTransfer.setData('Text', '');
   },
  });
 }

css 部分

//針對固定列的table需要處理hover的樣式
tr.hover-row {
  &,
  &.el-table__row--striped {
    &,
    &.current-row {
      > td {
        background-color: transparent;
      }
    }
  }
}
//托拽時的樣式
.sortable-ghost {
  opacity: 0.8;
  color: #fff !important;
  background: #42b983 !important;
}

注意事項：el-table 需要指定 row-key 否則會發生不生效的現象，托拽時的樣式不生效時，需要將 el-table 的 hover 樣式去掉

兩個 table 的相互托拽

最終實現效果：

// 初始化拖拽
 setSort() {
  console.log(this.$refs.rightTable);
  const el = this.$refs.rightTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
  const el2 = this.$refs.leftTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0];
  let _this = this;
  this.sortable = Sortable.create(el, {
   group: {
    name: 'shared',
    pull: data => {
     console.log('right: data', data);
    },
   },
   animation: 150, //動畫效果
   //  指定父元素下可被拖拽的子元素
   draggable: '.el-table__row',
   onUpdate({ to, from, newIndex, oldIndex }) {
    const currRow = _this.rightTableData.splice(oldIndex, 1)[0];
    _this.rightTableData.splice(newIndex, 0, currRow);
    // console.log('onUpdate: onEnd -> to, from,', to, from);
    console.log('onUpdate-> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log('列表單元在列表容器中的排序發生變化后的回調函數');
   },
   onRemove({ to, from, newIndex, oldIndex }) {
    const currRow = _this.rightTableData.splice(oldIndex, 1)[0];
    _this.leftTableData.splice(newIndex, 0, currRow);
    // console.log('onRemoveleft: onEnd -> to, from,', to, from);
    console.log('onRemove -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log('列表元素移到另一個列表容器的回調函數');
   },
   ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
   setData: function(dataTransfer) {
    // to avoid Firefox bug
    // Detail see : https://github.com/RubaXa/Sortable/issues/1012
    dataTransfer.setData('Text', '');
   },
  });
  this.sortable = Sortable.create(el2, {
   group: {
    name: 'shared',
    pull: data => {
     console.log('left: data', data);
    },
   },
   animation: 150, //動畫效果
   //  指定父元素下可被拖拽的子元素
   draggable: '.el-table__row',
   onRemove({ to, from, newIndex, oldIndex }) {
    const currRow = _this.leftTableData.splice(oldIndex, 1)[0];
    _this.rightTableData.splice(newIndex, 0, currRow);
    // console.log('onRemoveleft: onEnd -> to, from,', to, from);
    // console.log('onRemove -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log('列表元素移到另一個列表容器的回調函數');
   },
   onChoose({ to, from, newIndex, oldIndex }) {
    // console.log('onChoose: onEnd -> to, from,', to, from);
    // console.log('onChoose-> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log('function 列表單元被選中的回調函數');
   },
   onStart({ to, from, newIndex, oldIndex }) {
    // console.log('onStart: onEnd -> to, from,', to, from);
    // console.log('onStart -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log('function 列表單元拖動開始的回調函數');
   },

   onAdd({ to, from, newIndex, oldIndex }) {
    // console.log('onAdd: onEnd -> to, from,', to, from);
    // console.log('onAddve -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log('列表單元添加到本列表容器的回調函數');
   },
   onUpdate({ to, from, newIndex, oldIndex }) {
    const currRow = _this.leftTableData.splice(oldIndex, 1)[0];
    _this.leftTableData.splice(newIndex, 0, currRow);
    // console.log('onUpdate: onEnd -> to, from,', to, from);
    // console.log('onUpdate-> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log('列表單元在列表容器中的排序發生變化后的回調函數');
   },
   onFilter({ to, from, newIndex, oldIndex }) {
    // console.log('onFilter: onEnd -> to, from,', to, from);
    // console.log('onFilter-> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log(' 試圖選中一個被filter過濾的列表單元的回調函數');
   },
   onMove({ to, from, newIndex, oldIndex }) {
    // console.log('onMove: onEnd -> to, from,', to, from);
    // console.log('onMovee -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log(' 當移動列表單元在一個列表容器中或者多個列表容器中的回調函數');
   },
   onClone({ to, from, newIndex, oldIndex }) {
    // console.log('onClone: onEnd -> to, from,', to, from);
    // console.log('onClone -> onEnd -> newIndex, oldIndex', newIndex, oldIndex);
    console.log(' 當創建一個列表單元副本的時候的回調函數');
   },
   ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
   setData: function(dataTransfer) {
    // to avoid Firefox bug
    // Detail see : https://github.com/RubaXa/Sortable/issues/1012
    dataTransfer.setData('Text', '');
   },
  });
 }