Vue element-ui Sortable 两个table内容拖拽

效果图

模板代码实现

    <div class="content">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-table
              ref="leftTable"
              row-key="id"
              :data="tableData"
              stripe
              class="left-table"
              style="width: 100%"
            >
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-table
              ref="rightTable"
              row-key="id"
              :data="tableDataA"
              stripe
              class="right-table"
              style="width: 100%"
            >
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>

js代码实现

请自行分割放置代码位置

// 模拟两组数据
data() {
    return {
      unMatchedList: [], // 左边未匹配的数据
      dataList: [], // 右边已匹配的数据
      pullIndex: "", //原数组拖拽元素的下标

      tableData: [
        {
          id: "12",
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          id: "14",
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          id: "11",
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          id: "13",
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区",
        },
      ],
      tableDataA: [
        {
          id: "22",
          date: "2016-06-02",
          name: "张二龙",
          address: "上海市普陀区",
        },
        {
          id: "24",
          date: "2016-06-04",
          name: "张二龙",
          address: "上海市普陀区",
        },
        {
          id: "21",
          date: "2016-06-01",
          name: "张二龙",
          address: "上海市普陀区",
        },
        {
          id: "23",
          date: "2016-06-03",
          name: "张二龙",
          address: "上海市普陀区",
        },
      ],
    };
  },

// 引入 Sortable 

import Sortable from "sortablejs";

// 组件中注册

components: { Sortable },

// methods 里写初始化方法
initSortable() {
      var that = this;
      var el = this.$el.querySelector(".left-table tbody");
      Sortable.create(el, {
        handle: ".el-table__row",
        animation: 150,
        group: { name: "tableGroup", pull: true, put: true },
        onUpdate: function (evt) {},
        // 开始拖拽的时候
        onStart: function (evt) {},
        onAdd: function (evt) {},
        onRemove: function (evt) {},
        onEnd(evt) {
          console.log(evt);
          const { from, to, oldIndex, newIndex } = evt;
          // console.log(from,to,oldIndex,newIndex);
          if (from === to) {
            console.log("右边自己内部拖动", newIndex, oldIndex);
            const currRow = that.tableData.splice(oldIndex, 1)[0];
            that.tableData.splice(newIndex, 0, currRow);
          } else if (from !== to) {
            console.log("从右边拖到左边", newIndex, oldIndex);
            const currRow = that.tableData.splice(oldIndex, 1)[0];
            that.tableDataA.splice(newIndex, 0, currRow);
          }
          console.log(that.tableData, that.tableDataA);
        },
      });
    },
    initSortableA() {
      var that = this;
      var el = this.$el.querySelector(".right-table tbody");
      Sortable.create(el, {
        handle: ".el-table__row",
        animation: 150,
        group: { name: "tableGroup", pull: true, put: true },
        onUpdate: function (evt) {},
        // 开始拖拽的时候
        onStart: function (evt) {},
        onAdd: function (evt) {},
        onRemove: function (evt) {},
        onEnd(evt) {
          console.log(evt);
          const { from, to, oldIndex, newIndex } = evt;
          // console.log(from,to,oldIndex,newIndex);
          if (from === to) {
            console.log("右边自己内部拖动", newIndex, oldIndex);
            const currRow = that.tableDataA.splice(oldIndex, 1)[0];
            that.tableDataA.splice(newIndex, 0, currRow);
          } else if (from !== to) {
            console.log("从右边拖到左边", newIndex, oldIndex);
            const currRow = that.tableDataA.splice(oldIndex, 1)[0];
            that.tableData.splice(newIndex, 0, currRow);
          }
          console.log(that.tableData, that.tableDataA);
        },
      });
    },
// 调用初始化方法

mounted() {    this.initSortable();    this.initSortableA();  },