vue2/3 - 基于element(ui/plus)实现el-table表格每行可拖动换位置排序，表格列（表头）可拖动交换位置功能效果（table表格可拖曳排序的行和列，用鼠标动态拖拽排序表格行列）

最新推荐文章于 2024-05-17 17:53:28 发布
最新推荐文章于 2024-05-17 17:53:28 发布
阅读量2.6k 收藏 4
点赞数 9
分类专栏： 前端组件与功能(开箱即用) 文章标签： element ui element plus el-table Table表格组件 vue2 vue3 vue表格可拖动排序的行与列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/137041496
版权

效果图

在vue2、vue3项目开发中，element饿了么组件库实现表格el-table组件支持【行和列可拖曳排序、换位置】功能，每行数据可拖拽进行排序调换位置，每列数据可以自由拖动进行调换位置。

提供详细示例代码，复制源码换个数据就能用了。

在这里插入图片描述

示例源码

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue Element ui实现table列拖动效果
11-07
1.附件内的源码是，是vue 和elementui实现table内的列可以随意拖拽的效果的代码。该代码在我的实际项目中已经应用。 2.table列的拖拽功能实现的核心就是改变 “表头列在数组中的位置”
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
对vue项目el-table表格进行鼠标左右拖动行为功能
最新发布
bbkhhvv的博客
05-17 91
我是在utils里定义了一个tableMove.js文件，里面代码如下。然后在main.js里全局引入tabelMove文件。
element-ui复杂table表格-动态新增列、动态调整行、列顺序
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
01-12 1万+
目标：实现一个复杂table具有以下功能：表格行展开、全部展开、收起、全部收起；可动态配置展示哪些列、调整列展示顺序；动态调整行顺序、行上移、行下移、行移动最顶部、行移动最底部
element table结合sortablejs、vuedraggable实现表格表头拖拽、隐藏显示操作
dddgddd的博客
08-04 663
实现表格表头字段内容可选、顺序可调功能。
vue3 elementPlus实现表格行列拖拽修改顺序
Lsir1998的博客
12-05 1502
vue3 使用sortablejs 实现elementplus 表格组件行列拖拽自定义顺序
ElementuiPlus的table组件实现行拖动与列拖动
qq_52845451的博客
11-03 3234
table组件实现行和列的拖动
vue3+ts 实现移动端拖拽交换位置
m0_59006402的博客
11-09 294
网上找了很多文章，这个试过了，真实有效。
element-ui el-table表头自定义配置，表格拖动排序
q759859479的博客
07-10 2988
一 需求说明 表格列太多，页面展示不下，希望可以对表头自定义配置，配置是否展示，宽度，顺序等等。配置绑定用户。 二 需求开发 2.1在表头右侧添加按钮，使用caption元素，
＜ elementUi 组件插件： el-table表格拖拽修改列宽及行高 及 使用注意事项 ＞
一个平平无奇的技术宅
02-17 1万+
由于项目需求，需要给定原先使用的element列表新增一个列宽动态拖拽功能。结合在网上找到的资源，出一期 “ 使用事项 ” 及 使用过程中的问题汇总
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
wl-tree-table:a tree table based on vue and element-ui，一个基于vue和element-ui的树形表格
05-11
el-tree-table组件基于vue和element-ui，在 的实现基础上增加一些新特性。 并在此声明treetable的业务实现再来上述开源项目，如有冒犯，请及时联系。 共同依据element-ui的写成。 扩展主要包括：显示边框、固定高度...
element-ui table 表格组件实现可拖拽效果（行、列）
Crazy_GirlLL的博客
01-31 2448
拖拽效果，先放效果图，步骤放在后面~~ 一、引入三方插件 1.引入sortable.js的包: npm install sortable.js --save 2.或者npm i -S vuedraggable 　　vuedraggable依赖 Sortable.js，所以下载了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。 　　vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来更方便 ...
实现简单的element-table的拖拽效果
雷加祥的博客
08-17 1825
实现简单的element-table的拖拽效果。
element UI 实现 table 列 拖拽
qq_46344419的博客
04-23 630
element UI 实现 table 列 拖拽
vue二次封装el-table实现拖拽功能
m0_67795833的博客
03-05 430
【代码】vue二次封装el-table实现拖拽功能。
vue3使用拖拽组件draggable-next的使用教程【保姆级】
热门推荐
唐唐唐行的博客
06-07 1万+
vue3使用拖拽组件draggable-next的使用教程
eltable刷新整个表格方法
04-28
ElTable是Element UI框架中的一个数据表格组件，提供了很多便捷的API供我们使用。其中刷新整个表格的方法为"reload()"方法。 使用"reload()"方法可以重新加载数据并刷新整个表格，可以适用于数据修改后要及时更新数据的情况。该方法的语法如下： ``` this.$refs.tableName.reloadData(); ``` 其中"tableName"是我们ElTable组件的ref属性名称，通过"$refs"可以访问到我们引用的ElTable组件实例。典型的代码示例如下： ``` <template> <div> <el-button type="primary" icon="el-icon-refresh" @click="handleReload">刷新表格</el-button> <el-table :data="tableData" ref="table"> ... </el-table> </div> </template> <script> export default { data() { return { tableData: [{ ... }] }; }, methods: { handleReload() { this.$refs.table.reloadData(); } } }; </script> ``` 需要注意的是，在使用"reload()"方法时，我们需要提前定义好"tableData"数据，以便ElTable组件可以获取到需要显示的内容。另外，如果数据源发生了变化，需要先更新数据再使用该方法进行刷新。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值