###
实现 Vue3 中
Element Plus 表格组件的
行拖动排序
为了
实现在
Vue3 和
Element Plus 中 `
el-table` 组件的
行拖动排序功能，需遵循特定配置方法来启用此特性。HTML模板部分定义了表格结构及其基本属性，而
JavaScript逻辑则负责处理交互
行为。
#### HTML 模板定义
在 `<template>` 部分创建一个包含 `
el-table` 的容器，并为其指定必要的属性：
```html
<template>
<div class="app
-container">
<
el-table :data="
tableData" ref="drag
Table" row
-key="id" border style="width: 100%">
<!
-- 定义表头
-->
<
el-table-column type="index" lab
el="#" width="50"></
el-table-column>
<
el-table-column prop="date" lab
el="日期" sor
table></
el-table-column>
<
el-table-column prop="name" lab
el="姓名"></
el-table-column>
<
el-table-column prop="address" lab
el="地址"></
el-table-column>
<!
-- 添加用于触发
拖拽操作的特殊列
-->
<
el-table-column fixed="right" lab
el="操作" width="120">
<template #default="{row}">
<i class="
el-icon
-rank drag
-handler" style="cursor: move;"></i> <!
-- 使用图标作为手柄
-->
</template>
</
el-table-column>
</
el-table>
</div>
</template>
```
上述代码片段展示了如何构建带有额外操作栏的表格布局，其中包含了用于启动
拖拽动作的手柄图标[^2]。
####
JavaScript 处理程序
接下来，在脚本区域引入依赖库并编写初始化函数以及事件处理器：
```
javascript
<script setup>
import { ref, onMounted } from '
vue';
import Sor
table from 'sor
tablejs'; // 导入Sor
table.js插件
const
tableData = ref([
{
date: '2016
-05
-03',
name: 'Tom',
address: 'No
. 189, Grove St, Los Ang
eles'
},
...
]);
onMounted(() => {
const
el = document
.queryS
elector('
.el-table__body
-wrapper tbody');
new Sor
table(
el, {
handle: '
.drag
-handler', // 设置拖动手柄的选择器
animation: 150,
ghostClass: "ghost",
chosenClass: "chosen",
onUpdate(event){
let oldIndex = event
.oldIndex;
let newIndex = event
.newIndex;
if (oldIndex !== undefined && newIndex !== undefined) {
var movedItem =
tableData
.value
.splice(oldIndex, 1)[0];
tableData
.value
.splice(newIndex, 0, movedItem);
}
}
});
});
</script>
```
这段脚本
实现了当页面加载完成后自动激活拖放机制的功能，并通过监听更新事件调整内部状态数组中的顺序以反映界面上的变化[^3]。
#### CSS 样式定制
最后，可以通过自定义CSS样式进一步优化用户体验：
```css
<style scoped>
.drag
-handler{
font
-size: 20px;
}
.el-table .ghost td {
background
-color: lightblue !important;
}
.chosen {
opacity: 0
.7;
}
</style>
```
这些样式规则增强了视觉反馈效果，使得正在被移动的
行更加明显[^1]。
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
