el-table行拖拽并且对数据的顺序更改
时间: 2024-01-30 15:16:50 浏览: 46
在 Element UI 的 el-table 中实现行拖拽并且对数据的顺序更改,可以使用 `vue-draggable` 插件。以下是实现步骤:
1. 安装 `vue-draggable` 插件:
```bash
npm install vuedraggable --save
```
2. 在需要使用的组件中引入:
```js
import draggable from 'vuedraggable'
```
3. 在 el-table 中添加拖拽指令和 `draggable` 组件:
```html
<el-table
v-draggable="{
group: 'table',
ghostClass: 'dragging',
handle: '.drag-handle',
animation: 300,
onEnd: onDragEnd
}"
>
<el-table-column label="名称" prop="name">
<template slot-scope="{ row }">
<span class="drag-handle">☰</span>
<span>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="类型" prop="type"></el-table-column>
<el-table-column label="值" prop="value"></el-table-column>
</el-table>
<draggable
v-model="tableData"
:options="{
group: 'table',
handle: '.drag-handle',
animation: 300,
onEnd: onDragEnd
}"
>
<template slot="item" slot-scope="{ element }">
<tr>
<td>
<span class="drag-handle">☰</span>
<span>{{ element.name }}</span>
</td>
<td>{{ element.type }}</td>
<td>{{ element.value }}</td>
</tr>
</template>
</draggable>
```
其中 `v-draggable` 是 el-table 的自定义指令,`draggable` 是 `vue-draggable` 组件,`tableData` 是 el-table 的数据源。在 el-table 中,通过 `slot-scope` 将行数据传递给模板,以便在行中添加拖拽手柄。在 `draggable` 组件中,使用 `v-model` 绑定数据源,通过 `slot` 插槽渲染行数据。
4. 实现拖拽结束后的回调函数 `onDragEnd`:
```js
methods: {
onDragEnd(event) {
this.tableData.splice(
event.newIndex,
0,
this.tableData.splice(event.oldIndex, 1)[0]
)
}
}
```
在拖拽结束后,将拖拽前的数据从数组中删除,再将其插入到拖拽后的位置。
这样就可以在 el-table 中实现行拖拽并且对数据的顺序更改了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)