1，使用纯表格

(* 注： 必须给element属性传 tbody，否则样式会有问题)

    <table class="dataTabble">
      <thead>
        <tr>
          <th>名称</th>
          <th>时间</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <Draggable
        v-model="tablelist"
        element="tbody"
        @change="changeDraggable"
        @start="drag = true"
        @end="drag = false"
      >
        <tr v-for="(item, id) in tablelist" :key="id">
          <td>{{ item.name }}</td>
          <td>{{ item.time }}</td>
          <td>{{ item.num }}</td>
          <td>
            <div class="tabopa">
              <a style="cursor: pointer">添加</a>
              <a>删除</a>
            </div>
          </td>
        </tr>
      </Draggable>
    </table>

2，使用elementUI table组件

<el-table :data="tablelist">
  <Draggable
    v-model="tablelist"
    v-bind="dragOptions"
    element="tbody"
    @change="changeDraggable"
    @start="drag = true"
    @end="drag = false"
  >
    <el-table-column type="index" label="序号" min-width="45">
    </el-table-column>
    <el-table-column
      prop="name"
      label="任务名称"
      min-width="110"
      show-overflow-tooltip
    >
    </el-table-column>
    <el-table-column
      prop="time"
      label="创建时间"
      min-width="150"
    >
    </el-table-column>
    <el-table-column label="操作" min-width="110">
      <template slot-scope="scope">
        <el-button type="text" size="mini"> 编辑 </el-button>
      </template>
    </el-table-column>
  </Draggable>
</el-table>

import Sortable from "sortablejs";
mounted() {
  this.rowDrop();
},
methods: {
  // 行拖拽
  rowDrop() {
    const tbody = document.querySelector(".el-table__body-wrapper tbody");
    const _this = this;
    Sortable.create(tbody, {
      onEnd({ newIndex, oldIndex }) {
        const currRow = _this.tablelist.splice(oldIndex, 1)[0];
        _this.tablelist.splice(newIndex, 0, currRow);
      },
    });
  },
}