el-table实现鼠标拖曳上下移动调整排列顺序

要实现鼠标拖拽上下移动调整el-table的排列顺序，可以使用el-table内置的sortable属性和dragging事件，并结合自定义的拖拽功能。

首先，需要给el-table的行添加一个自定义的拖拽指示器，用于识别拖拽的起始和目标位置。可以使用HTML5的draggable属性来实现拖拽功能。在el-table中，可以通过scoped slot来自定义行的内容。

在模板中，可以这样定义el-table：

<el-table :data="tableData" :sortable="true">
  <template slot-scope="{ row, $index }">
    <tr draggable="true" @dragstart="handleDragStart($event, $index)" @dragover="handleDragOver($event, $index)" @drop="handleDrop($event, $index)" @dragend="handleDragEnd">
      <!-- 行内容 -->
    </tr>
  </template>
</el-table>

在这个例子中，我们给每一行的tr元素添加了draggable属性，并绑定了dragstart、dragover、drop和dragend事件。其中，dragstart事件表示拖拽开始，dragover事件表示拖拽过程中，drop事件表示拖拽结束时放置元素，dragend事件表示拖拽结束。

接下来，在Vue组件中定义相关的事件处理方法：

methods: {
  handleDragStart(event, index) {
    event.dataTransfer.setData('text/plain', index); // 设置被拖动的数据
    event.dataTransfer.effectAllowed = 'move'; // 设置拖动的效果
    event.target.classList.add('dragging'); // 添加拖动时的样式
  },
  handleDragOver(event, index) {
    event.preventDefault(); // 阻止默认行为
    event.dataTransfer.dropEffect = 'move'; // 设置拖动的效果
  },
  handleDrop(event, index) {
    event.preventDefault(); // 阻止默认行为
    const fromIndex = Number(event.dataTransfer.getData('text/plain')); // 获取被拖动的数据
    if (fromIndex !== index) {
      this.tableData.splice(index, 0, this.tableData.splice(fromIndex, 1)[0]); // 调整数据的位置
    }
  },
  handleDragEnd(event) {
    event.target.classList.remove('dragging'); // 移除拖动时的样式
  }
}

在handleDragStart方法中，我们使用event.dataTransfer.setData方法来设置被拖动的数据，这里我们将行的索引作为数据进行传递。同时，我们设置了拖动的效果和添加了拖动时的样式。

在handleDragOver方法中，我们通过event.preventDefault方法阻止默认行为，并设置了拖动的效果。

在handleDrop方法中，我们通过event.preventDefault方法阻止默认行为，并获取被拖动的数据，然后根据拖动的起始和目标位置调整el-table的数据的位置。

在handleDragEnd方法中，我们移除了拖动时添加的样式。

最后，可以通过CSS来定义拖动时的样式：

tr.dragging {
  background-color: #f0f0f0;
}

这样，就实现了el-table的鼠标拖拽上下移动调整排列顺序的功能。