vue3 element-plus el-table动态拖拽
时间: 2025-05-09 14:18:19 浏览: 26
### Vue3 Element Plus El-Table 行拖拽功能实现
为了实现在 `Vue3` 中使用 `Element Plus` 的 `el-table` 组件来达到行拖拽的效果,需引入第三方库 `SortableJS` 来辅助完成此操作。通过该方法不仅能够轻松实现行之间的顺序调整,还能确保用户体验流畅自然。
#### 安装依赖包
首先,在项目中安装 `sortablejs`:
```bash
npm install sortablejs --save
```
#### 导入并初始化 Sortable
接着,在组件内部导入 `Sortable` 并对其进行初始化设置。这一步骤至关重要,因为只有当表格渲染完成后才能正确应用拖拽逻辑[^2]。
#### HTML 结构定义
在模板部分定义好基础结构,注意给 `<el-table>` 设置唯一标识符以便后续挂载事件监听器,并指定 `row-key` 属性用于区分每一行记录的独特性[^3]。
```html
<template>
<div class="example">
<!-- 使用ref属性关联DOM节点 -->
<el-table ref="dragTable" :data="list" border row-key="id">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
```
#### JavaScript 部分处理
最后,在脚本区域编写必要的业务逻辑代码,包括但不限于创建一个新的实例化对象以及绑定相应的事件处理器等动作。这里展示了如何利用生命周期钩子函数 `mounted()` 来触发一次性的初始化过程[^1]。
```javascript
<script setup lang="ts">
import { onMounted } from 'vue';
import Sortable from 'sortablejs';
// 示例数据列表
const list = [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
// 更多条目...
];
onMounted(() => {
const el = document.querySelector('.example .el-table__body-wrapper tbody');
new Sortable(el, {
animation: 150,
ghostClass: 'sortable-ghost', // Class name for the drop placeholder
chosenClass: 'sortable-chosen',
onUpdate(event) {
console.log('更新后的索引:', event.newIndex);
// 更新本地状态中的数组项位置
const oldItem = list.splice(event.oldIndex, 1)[0];
list.splice(event.newIndex, 0, oldItem);
// 或者直接修改原始数据源 (如果适用的话)
// this.$emit('update:list', [...this.list]);
}
});
});
</script>
<style scoped>
.sortable-ghost{
opacity: 0.7;
}
.sortable-chosen{
background-color:#4AB7BD !important;
}
</style>
```
上述示例完整地描述了一个基于 `Vue3` 和 `Element Plus` 构建的支持行级拖拽排序的表格案例。其中涉及到的关键技术点有:借助外部插件增强原生HTML元素的功能;合理运用框架特性简化开发流程;注重细节优化提升交互体验等方面的内容。
阅读全文
相关推荐


















