el-table 表格行拖动 sortable.js

最新推荐文章于 2024-08-01 09:53:22 发布
最新推荐文章于 2024-08-01 09:53:22 发布
阅读量793 收藏
点赞数 1
分类专栏： vue el-table 拖动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JinPingQ/article/details/113563516
版权
本文介绍了如何在Vue项目中利用sortable.js实现el-table表格的行拖动功能。通过cdn引入sortable.js，设置html结构，定义data和方法，但初次实现时存在拖动效果与页面显示不一致的问题。最终通过$nextTick解决这个问题，避免了数据与视图同步的坑。
摘要由CSDN通过智能技术生成

首先 拖动使用sortable.js 插件 文档 http://www.sortablejs.com/

1、引入js 我选择cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.13.0/Sortable.min.js"></script>

2、html代码

<el-table :data="tableData">
            <el-table-column prop="value" label="表头1"> </el-table-column>
            <el-table-column prop="value" label="表头2"> </el-table-column>
            <el-table-column prop="value" label="表头3"> </el-table-column>
            <el-table-column prop="value" label="表头4"> </el-table-column>
</el-table>

3、data数据 方法

data:function(){
      return {
         tableData:[
最低0.47元/天 解锁文章
暖ping
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue用sortablejs实现el-table表格行拖拽排序，在el-dialog中使用遇到的问题
coderYYY的博客
06-09 435
使用sortable.js实现el-table行拖拽
一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js（附例子）
12-13
一款用于表格数据自定义排序的jQuery插件，仿EasyUI，数据列启用自定义排序后，该列标题后将出现向上或者向下的三角形，点击列标题设置新的排序参数。附的例子是asp.net mvc的，但插件是基于jQuery 的，当然可以用于其他语言的。
el-table支持行拖动
最新发布
FE小白的进化之路
08-01 177
【代码】el-table支持行拖动。
el-table行拖拽（SortTablejs）
hsx18787462705的博客
04-16 826
表格拖拽
JS组件系列——Bootstrap Table 表格行拖拽
weixin_33896069的博客
10-30 314
前言：之前一直在研究DDD相关知识，好久没更新JS系列文章了。这两天做了一个简单的业务需求，觉得效果还可以，今天在这里分享给大家，欢迎拍砖~~ 一、业务需求及实现效果 项目涉及到订单模块，那天突然接到一个需求，说是两种不同状态的订单之间要实现插单的效果，页面上呈现方式是：左右两个Table，左边Table里面是状态为1的订单，右边Table里面是状态为2订单，左边Table里面的行数据拖动到右...
vue中el-table的行拖拽和el-dialog中表格的行拖拽
qq_69775429的博客
04-16 403
表格数据一定要有唯一标识加上row-key值。2 el-dialog弹窗中的表格进行使用时。vue 中el-table行拖拽使用。方法使用时在点击打开弹窗时进行使用。页面挂载时化调用方法。
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...
VUE +el-table+sortable.js实现拖拽表格table排序，实现行排序，列排序(踩坑提醒)
MRSLLLL_的博客
12-03 1412
Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大） 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大） 官方Demo：http://rubaxa.github.io/Sortable/ 安装步骤,注意安装的是sortablejs,别安装成其他的,也是不行的 npm install sortablejs --save 在.vue中的j
el-table表格可拖拽实现
QZ9420的博客
06-28 695
el-table表格可拖拽实现
el-table拖拽方法记录
oyxm____的博客
02-23 816
使用sortableJs插件实现拖拽排序。
el-table 实现行可拖拽
qq_42396813的博客
01-05 1180
el-table 实现行排序
在elementui中的el-table组件实现行的拖拽效果
weixin_42060658的博客
06-24 5252
第一步： 第三方包下载 # 二选一 npm install vuedraggable npm insall sortablejs 注意点: vue中使用vuedraggable或者sortablejs实现,其实 vuedraggable依赖于 Sortable，当npm install vuedraggable时其实就有了 sortablejs sortablejs相关配置，官方文档 第二步： 使用 // draggable 依赖于 Sortable，当npm install vuedraggable时其
el-table拖拽功能实现（3种详细解释）
qq_71214810的博客
12-22 6284
1.el-table自带的列宽拖拽 2.实现左右table宽度拖拽 3.利用第3方插件自由拖拽
Element table 上下拖动移动，需求不简单
情义的博客
05-14 2058
Element table 上下移动，听起来是不是很简单的需求，产品的描述也简单：表格数据支持拖动上下移，支持通过选择表格行数据点击按钮上下移。最终效果大概如下(模拟数据共7条，去除了关联的业务操作)
JS动态拖动表格实现
weixin_30341745的博客
03-24 538
<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>JS动态拖动表格实现</TITLE><STYLE>td{width:20%;height:20px;border-bottom:1px solid bla...
vue2中利用sortable.js实现两个el-table树形结构的拖拽功能
07-15
要在Vue2中使用Sortable.js实现两个el-table之间的树形结构拖拽功能，可以按照以下步骤进行操作： 1. 安装Sortable.js和Vue-Sortable插件： ```bash npm install sortablejs vue-sortable ``` 2. 在Vue组件中引入并使用Vue-Sortable插件： ```vue <template> <div> <el-table :data="treeData1" :row-key="row => row.id" ref="table1" > <!-- 表格列定义 --> </el-table> <el-table :data="treeData2" :row-key="row => row.id" ref="table2" > <!-- 表格列定义 --> </el-table> </div> </template> <script> import Sortable from 'sortablejs'; import { VueSortable } from 'vue-sortable'; export default { components: { VueSortable }, data() { return { treeData1: [ // 表格数据 ], treeData2: [ // 表格数据 ] }; }, mounted() { this.$nextTick(() => { this.makeTablesSortable(); }); }, methods: { makeTablesSortable() { Sortable.create(this.$refs.table1.$el, { group: 'table', animation: 150, onEnd: this.onTableDragend }); Sortable.create(this.$refs.table2.$el, { group: 'table', animation: 150, onEnd: this.onTableDragend }); }, onTableDragend(event) { const sourceTable = event.from === this.$refs.table1.$el ? 'table1' : 'table2'; const targetTable = event.to === this.$refs.table1.$el ? 'table1' : 'table2'; const sourceData = this[sourceTable]; const targetData = this[targetTable]; // 根据event对象中的信息，更新sourceData和targetData的顺序 } } }; </script> ``` 在上面的示例代码中，我们使用Vue-Sortable插件将Sortable.js应用于el-table。通过在mounted钩子函数中调用makeTablesSortable方法，我们创建了两个可拖拽的Sortable实例，并将其应用于el-table组件。在onEnd回调函数中，我们可以根据拖拽事件的信息来更新sourceData和targetData的顺序，从而实现树形结构的拖拽功能。 请注意，上述代码仅提供了一个基本的示例，具体的更新逻辑需要根据你的业务需求来实现。 希望以上信息对你有所帮助！如果有任何问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值