vue + element table 实现行列拖拽
element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现
安装Sortable.js
npm install sortablejs --save
引入Sortable:
import Sortable from ‘sortablejs’
element table务必指定row-key,row-key必须是唯一的,如ID,不然会出现排序不对的情况。但是不可用index,因为拖拽后index会变,会有问题。
view:
<el-table :data="tableData" row-key="id"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> </el-table>
data:
col:[ {label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, {label: '地址', prop: 'address'} ], dropCol:[ {label: '日期', prop: 'date' }, {label: '姓名', prop: 'name' }, { label: '地址', prop: 'address'} ], tableData: [ { id: '1', date: '2016-05-02', name: '王小虎1', address: '上海市普陀区金沙江路 100 弄' }, { id: '2', date: '2016-05-04', name: '王小虎2', address: '上海市普陀区金沙江路 200 弄' }, { id: '3', date: '2016-05-01', name: '王小虎3', address: '上海市普陀区金沙江路 300 弄' }, { id: '4', date: '2016-05-03', name: '王小虎4', address: '上海市普陀区金沙江路 400 弄' } ]
mounted:
this.rowDrop(); this.columnDrop();
method:
// 行拖拽 rowDrop () { // 此时找到的元素是要拖拽元素的父容器 const tbody = document.querySelector('.el-table__body-wrapper tbody'); const _this = this; Sortable.create(tbody, { // 指定父元素下可被拖拽的子元素 draggable: ".el-table__row", onEnd ({ newIndex, oldIndex }) { const currRow = _this.tableData.splice(oldIndex, 1)[0]; _this.tableData.splice(newIndex, 0, currRow); } }); }, // 列拖拽 columnDrop () { const wrapperTr = document.querySelector('.el-table__header-wrapper tr'); this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: evt => { const oldItem = this.dropCol[evt.oldIndex]; this.dropCol.splice(evt.oldIndex, 1); this.dropCol.splice(evt.newIndex, 0, oldItem); } }); },
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通