vue el-table拖动排序

Vue中的el-table可以通过拖拽来实现表格的排序。实现方法有多种，其中一种是使用vuedraggable插件。另外，也可以使用sortablejs来实现行拖拽和列拖拽。在使用el-table时，需要注意指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。同时，row-key不可用index，因为拖拽后index会变，会有问题。

相关问题

vue3中el-table实现拖拽排序

在Vue3中，利用Element UI库的`el-table`组件实现拖拽排序功能，通常需要结合`draggable`和`v-model`以及事件监听机制。以下是基本步骤：

1. 首先，在数据列表上设置`draggable`属性，以便元素可以被拖动，同时设置`key`属性用于跟踪每个条目的唯一标识。

<template>
  <el-table :data="tableData" :key="item.id">
    <el-table-column type="index"></el-table-column>
    <!-- 其他列... -->
    <el-table-column prop="sortOrder" label="排序" width="100">
      <template slot-scope="scope">
        <draggable v-model="scope.row" @start="dragStart(scope.$index)" @end="dragEnd(scope.$index)">
          {{ scope.row.label }}
        </draggable>
      </template>
    </el-table-column>
  </el-table>
</template>

2. 使用自定义指令`draggable`，它需要定义`start`和`end`事件处理器。`start`处理开始拖动操作，保存当前元素的位置；`end`处理结束拖动，更新数据的顺序。

<script setup>
import draggable from 'vue-draggable';

const dragStart = (index) => {
  // 当前拖动的元素索引，可以在此记录原始位置
  draggedIndex = index;
};

const dragEnd = (index) => {
  // 获取拖动后的目标位置
  const targetIndex = ...; // 根据实际情况计算

  // 更新数组的顺序，这里假设tableData是一个响应式数组
  const temp = tableData[index];
  tableData.splice(index, 1);
  tableData.splice(targetIndex, 0, temp);

  // 如果有必要，也可以同步数据库或通知其他部分更新
};
</script>

3. 要确保数据模型支持实时更新，你可以选择使用`ref`、`reactive`或Vue的响应式系统。

4. 这里需要注意的是，实际项目中可能还需要处理多种情况，比如多个元素之间的交互、删除元素等，所以这个示例只是一个基础版的演示。

vue2 的el-table表单拖动排序

Vue2的`el-table`组件提供了行拖动排序的功能，这通常用于实现表格行的顺序调整。要实现这个功能，需要使用Element UI提供的`Draggable`指令。以下是一个基本的实现步骤：

1. 在需要实现拖动排序的`el-table`元素上添加`draggable`属性，并指定一个`row-key`属性，这样`Draggable`指令就可以正确地识别和操作行数据。
2. 使用`@start`、`@drag`、`@end`事件来获取拖动操作的开始、进行中和结束时的索引。
3. 根据这些事件提供的信息来更新数据源，以反映行的排序变化。

示例代码如下：

<template>
  <el-table
    :data="tableData"
    row-key="id"
    draggable
    @start="handleDragStart"
    @drag="handleDrag"
    @end="handleDragEnd">
    <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        // ...其他数据
      ]
    };
  },
  methods: {
    handleDragStart(param) {
      // 拖动开始时的操作
    },
    handleDrag(param) {
      // 拖动进行中的操作，如反馈拖动效果
    },
    handleDragEnd(param) {
      // 拖动结束后的操作，如更新数据源
      let rows = this.$refs.table.store.states.data;
      this.tableData = param.newIndex.map(index => {
        return rows[index];
      });
    }
  }
};
</script>

在这个示例中，我们监听了`handleDragStart`、`handleDrag`和`handleDragEnd`三个事件。当拖动开始时，你可以在这里添加任何你需要的行为。`handleDrag`事件可以用来更新拖动过程中的视觉反馈，而`handleDragEnd`事件则是在拖动结束时更新表格数据的关键。

需要注意的是，`el-table`的拖动排序功能需要依赖`el-table-column`组件，因此每一列都需要放在`el-table`内部。