vue3+elementuiplus+Sortable实现表格内容拖拽重新排序

在Vue 3和Element Plus中，你可以使用Sortable.js来实现表格行的拖拽重排序。以下是一个简单的例子：

1. 安装Sortable.js依赖：

npm install sortablejs

2. 在Vue组件中使用Sortable.js：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    border
    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>
</template>
 
<script>
import { ref, onMounted } from 'vue';
import Sortable from 'sortablejs';
 
export default {
  setup() {
    const tableData = ref([
      { id: 1, date: '2016-05-02', name: 'John' },
      { id: 2, date: '2016-05-04', name: 'Doe' },
      // 更多数据...
    ]);
 
    onMounted(() => {
      const el = document.querySelector('.el-table__body-wrapper tbody');
      const sortable = Sortable.create(el, {
        animation: 150,
        delay: 0,
        onEnd: (evt) => {
          const newIndex = evt.newIndex;
          const oldIndex = evt.oldIndex;
          if (newIndex !== oldIndex) {
            const targetRow = tableData.value.splice(oldIndex, 1)[0];
            tableData.value.splice(newIndex, 0, targetRow);
          }
        }
      });
    });
 
    return {
      tableData
    };
  }
};
</script>

在这个例子中，我们使用了el-table和el-table-column组件来展示表格，并通过row-key属性指定了每行的唯一键。在onMounted钩子中，我们使用document.querySelector选中表格的 tbody 元素，并创建了一个Sortable实例。在onEnd事件中，我们通过evt.newIndex和evt.oldIndex得知拖拽后的新位置和旧位置，然后通过Vue的响应式数组方法splice来实现数据的重排序。