vue的el-table实现行拖拽

一:效果图

​​​​​​​

 

二:准备

安装sortablejs库,实现拖拽效果

npm install sortablejs

安装element-plus库,实现手指图标效果

npm install element-plus

三:完整代码

<template>

    <el-table class="tableClass" :data="tableData" style="width: 100%" row-key="id">

     <el-table-column label="" width="100">

        <el-button link type="primary" size="small" :icon="Pointer">拖拽</el-button>

      </el-table-column>

      <el-table-column prop="id" label="ID" width="180" />

      <el-table-column prop="content" label=

### 实现 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="dragTable" row-key="id" border style="width: 100%"> <!-- 定义表头 --> <el-table-column type="index" label="#" width="50"></el-table-column> <el-table-column prop="date" label="日期" sortable></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <!-- 添加用于触发拖拽操作的特殊列 --> <el-table-column fixed="right" label="操作" 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 Sortable from 'sortablejs'; // 导入Sortable.js插件 const tableData = ref([ { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, ... ]); onMounted(() => { const el = document.querySelector('.el-table__body-wrapper tbody'); new Sortable(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]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值