两个div在同一行显示_基于el-table+sortablejs 两个表格之间的相互拖拽

知乎视频​www.zhihu.com

近期做项目遇到两个表格之间数据相互拖动,由于sortablejs 操作的是dom,不会更新数据,所以在拖动完成后手动修改数据,注意要给表格绑定row-key 否则内部排序会紊乱!

全部代码如下

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