sortable+element 实现表格行拖拽的方法示例

一、背景介绍

二、方案介绍

1. Sortable.js：这是一款轻量级的拖放排序列表的js插件，可以方便地实现拖拽功能。

2. vue-draggable：基于Sortable.js的Vue组件，用于实现拖拽功能。

在使用vue-draggable时，我们遇到了一个问题：element组件库对table进行了封装，无法直接将拖动项的父级元素（即tr）包裹在标签内。我们需要寻找其他解决方案。

三、解决方案

我们可以直接使用Sortable.js来实现拖拽功能。以下是具体步骤：

1. 安装Sortable.js：通过npm安装Sortable.js。

```bash

npm install sortablejs --save

```

2. 引入Sortable.js：在需要使用拖拽功能的组件中引入Sortable.js。

```javascript

import Sortable from 'sortablejs';

```

3. 在el-table中添加row-key属性：为el-table添加row-key属性，以便在拖拽时能够准确地识别每一行数据。例如：

```html

```

其中，"id"是每行数据的唯一标识。

4. 将拖拽元素设置为要拖动项的父级元素：在mounted生命周期钩子中，选中el-table的tbody元素，并使用Sortable.create方法创建可拖拽的实例。例如：

```javascript

mounted() {

const self = this; // 保存当前组件实例的引用

Sortable.create(table, { // 创建可拖拽的实例

onEnd({ newIndex, oldIndex }) { // 拖拽结束时的回调函数

console.log(newIndex, oldIndex); // 输出新旧索引值

const targetRow = self.resourceList.splice(oldIndex, 1)[0]; // 从旧索引处移除数据项

}

});

}

```

至此，我们已经成功实现了el-table的行拖拽功能。当拖拽行时，数据项将在数组中的位置发生变化，从而实现行的拖拽排序功能。需要注意的是，我们需要在回调函数中更新数据列表，以便在视图层面反映数据的变动。我们还需要确保数据的准确性，避免因操作不当导致数据丢失或错位的问题。这就是我们的解决方案。希望通过这个示例能帮助大家更好地理解如何使用Sortable.js和vuedraggable来实现Vue项目中el-table的行拖拽功能。也希望大家能够多多支持我们的推广。狼蚁SEO与您一起更多优质内容！