基于el-table+sortablejs 两个表格之间的相互拖拽

<template>  <div>    <div class="headBox">      <h1>左右两边相互拖拽行</h1>    </div>    <div class="box">      <div>        <el-table          border          style="width: 390px"          :data="table1"          ref='leftTable'          row-key="id"          @row-click='rowClick'        >          <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>        <el-table          border          style="width: 390px"          ref='rightTable'          :data="table2"          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 {      table1: [        { name: '张三', age: 18, id: 1 },        { name: '李四', age: 19, id: 2 },        { name: '王五', age: 20, id: 3 },        { name: '赵四', age: 21, id: 4 }      ],      table2: []    }  },  mounted() {    const leftTable = this.$refs.leftTable    const rightTable = this.$refs.rightTable    const leftTabletbody = leftTable.$el.querySelector('tbody')    const rightTabletbody = rightTable.$el.querySelector('tbody')    this.rowDrop1(leftTabletbody)    this.rowDrop2(rightTabletbody)  },  methods: {    rowClick(row) {      row.isSelect = true    },    getKey(row) {      return row.id    },    rowDrop1(dom, target) {      const _this = this      return Sortable.create(dom, {        sort: true,        group: { name: 'tableGroup', pull: true, put: true },        onEnd(obj) {          const { from, to, newIndex, oldIndex } = obj          if (from === to) {            console.log('左边自己内部拖动', newIndex, oldIndex)            const currRow = _this.table1.splice(oldIndex, 1)[0]            _this.table1.splice(newIndex, 0, currRow)          } else if (from !== to) {            console.log('从左边拖到右边', newIndex, oldIndex)            const currRow = _this.table1.splice(oldIndex, 1)[0]            _this.table2.splice(newIndex, 0, currRow)          }          console.log(_this.table1, _this.table2)        }      })    },    rowDrop2(dom, target) {      const _this = this      return Sortable.create(dom, {        sort: true,        group: { name: 'tableGroup', pull: true, put: true },        // 元素从一个列表拖拽到另一个列表        onEnd(obj) {          const { from, to, newIndex, oldIndex } = obj          if (from === to) {            console.log('右边自己内部拖动', newIndex, oldIndex)            const currRow = _this.table2.splice(oldIndex, 1)[0]            _this.table2.splice(newIndex, 0, currRow)          } else if (from !== to) {            console.log('从右边拖到左边', newIndex, oldIndex)            const currRow = _this.table2.splice(oldIndex, 1)[0]            _this.table1.splice(newIndex, 0, currRow)          }          console.log(_this.table1, _this.table2)        }      })    }  }}</script><style scoped>.headBox{  margin-top: 30px;  font-size: 40px;  color: red;}.box {  margin: 100px;  display: flex;  justify-content: space-around;}</style>