sortablejs实现两个表格之间的单行、多行拖拽

参考文章：table表格嵌套子表格_基于el-table+sortablejs 两个表格之间的相互拖拽

本文是基于sortablejs、el-table实现的两个表格之间的单行和多行拖拽，为简易版本。 效果图：

核心逻辑： 对拖拽过程中的end事件作监听处理。

具体实现代码如下：

  <div>
    <div class="container">
      <div>
        <el-table
          border
          style="width: 390px"
          :data="leftTableData"
          ref='leftTable'
          row-key="id"
          @row-click='rowClick'
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="180"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="right-table">
        <el-table
          border
          style="width: 390px"
          ref='rightTable'
          :data="rightTableData"
          row-key='id'
        >
          <el-table-column
            type="index"
            width="50"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="180"
          >
          </el-table-column>
        </el-table>
      </div>
 
    </div>
  </div>
 
</template>
<script>
import Sortable from 'sortablejs'
export default {
  components: {
    Sortable
  },
  data() {
    return {
      leftTableData: [
        { name: '张三', age: 18, id: 1 },
        { name: '李四', age: 19, id: 2 },
        { name: '王五', age: 20, id: 3 },
        { name: '赵四', age: 21, id: 4 }
      ],
      rightTableData: [],
      multipleSelection: []
    }
  },
  mounted() {
    const leftTable = this.$refs.leftTable
    const rightTable = this.$refs.rightTable
    const leftTabletbody = leftTable.$el.querySelector('tbody')
    const rightTabletbody = rightTable.$el.querySelector('tbody')
    this.leftDragHandler(leftTabletbody)
    this.rightDragHandler(rightTabletbody)
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    rowClick(row) {
      row.isSelect = true
    },
    leftDragHandler(dom, target) {
      const _this = this
      return Sortable.create(dom, {
        sort: true,
        group: { name: 'table-group', pull: true, put: true },
        onEnd(obj) {
          const { from, to, newIndex, oldIndex } = obj
          if (from === to) {
            const currRow = _this.leftTableData.splice(oldIndex, 1)[0]
            _this.leftTableData.splice(newIndex, 0, currRow)
          } else if (from !== to) {
            if (!_this.multipleSelection.length) {
              const currRow = _this.leftTableData.splice(oldIndex, 1)[0]
              _this.rightTableData.splice(newIndex, 0, currRow)
            } else {
              const copyMultiArr = JSON.parse(JSON.stringify(_this.multipleSelection))
              _this.$nextTick(() => {
                  const idMap = _this.multipleSelection.map(i => i.id)
                _this.leftTableData = _this.leftTableData.filter(i => {
                  return idMap.indexOf(i.id) === -1
                })
                _this.rightTableData = _this.rightTableData.concat(copyMultiArr)
              })
            }
          }
        }
      })
    },
    rightDragHandler(dom, target) {
      const _this = this
      return Sortable.create(dom, {
        sort: true,
        group: { name: 'table-group', pull: true, put: true },
        // 元素从一个列表拖拽到另一个列表
        onEnd(obj) {
          const { from, to, newIndex, oldIndex } = obj
          if (from === to) {
            console.log('右边自己内部拖动', newIndex, oldIndex)
            const currRow = _this.rightTableData.splice(oldIndex, 1)[0]
            _this.rightTableData.splice(newIndex, 0, currRow)
          } else if (from !== to) {
            console.log('从右边拖到左边', newIndex, oldIndex)
            const currRow = _this.rightTableData.splice(oldIndex, 1)[0]
            _this.leftTableData.splice(newIndex, 0, currRow)
          }
          console.log(_this.leftTableData, _this.rightTableData)
        }
      })
    }
  }
}
</script>
<style scoped>
.container {
  margin: 100px;
  display: flex;
  justify-content: space-around;
}
.right-table {
  margin-left: 30px;
}
</style>

`

`