vue项目之 el-table 拖拽行

最新推荐文章于 2024-05-31 16:00:00 发布
最新推荐文章于 2024-05-31 16:00:00 发布
阅读量3.3k 收藏 2
点赞数 3
分类专栏： VUE 文章标签： el-table 拖拽行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yan263364/article/details/102580923
版权

一、功能

表格的任意行都可以拖拽位置；默认不能拖拽表格，点击拖拽按钮可以拖拽。

在这里插入图片描述

二、代码

npm 下载 sortablejs
在这里插入图片描述
页面按钮：
在这里插入图片描述页面el-table
在这里插入图片描述
js引入 sortablejs
在这里插入图片描述
data() {} 里面的相关数据
在这里插入图片描述
method: {}
在这里插入图片描述
disabledRow()
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

柒仔不安
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。 首先，ElementUI的`el-table`组件通常通过`<el-table-...
el-table实现行拖拽
weixin_46923775的博客
04-15 4215
vue想要实现拖拽 需要安装两个插件(1.vuedraggable;2.sortablejs) npm install vuedraggable; npm install sortablejs; <el-table :data="tableData" row-key="id"> <el-table-column prop="id" label="ID"> </el-table-column> <el-table-column prop
vuedraggable 能和el-table结合使用
最新发布
qq_34401037的博客
05-31 592
在这个例子中,我们使用了一个自定义指令 v-drag-drop 来实现表格行的拖拽排序功能。当用户拖动表格行时,会触发 onEnd 事件,我们在这个事件中更新 tableData 数据源,从而更新表格的显示。当然,vuedraggable 确实可以与 el-table 组件结合使用。总之,通过结合使用 vuedraggable 和 el-table,我们可以实现表格的拖拽排序功能,为用户提供更好的交互体验。需要注意的是,我们使用了 row-key 属性来唯一标识每一行数据,这是为了保证拖拽操作的正确性。
vue中el-table的行拖拽和el-dialog中表格的行拖拽
weixin_43312391的博客
07-29 5665
以上行拖拽的方法适用于实现效果的第一种情况，即根据querySelector('.el-table__body-wrappertbody')可找到页面中的el-table实现拖拽。（2）页面中有el-table，el-table中点击出现弹框，弹框中有el-table，实现弹框中的表格拖拽。5.vue页面中使用mounted挂载行拖拽的方法，使其页面加载即可调用。3.使用el-table需有唯一的key值，如id。（1）el-table的行拖拽（可整行拖拽）这样就实现了el-table的行拖拽功能。...
el-table拖拽功能实现（3种详细解释）
qq_71214810的博客
12-22 5567
1.el-table自带的列宽拖拽 2.实现左右table宽度拖拽 3.利用第3方插件自由拖拽
el-table 实现行可拖拽
qq_42396813的博客
01-05 1150
el-table 实现行排序
【JavaScript源代码】vue 使用 sortable 实现 el-table 拖拽排序功能.docx
12-29
在Vue.js应用中，实现`el-table`组件的拖拽排序功能可以借助第三方库`sortablejs`。`sortablejs`是一个轻量级的JavaScript库，它允许用户通过鼠标或触摸事件对HTML元素进行拖放排序。以下是使用`sortablejs`在Vue中...
vue +el + Sortable table列拖拽排序
05-19
vue table 列拖拽排序例子
改变el-table宽度
12-12
`:width`的值来自`tableColumn`对象，通过`tableColumn['tab-table-1'][索引]`获取，这里的`'tab-table-1'`是表格ID，索引对应于`el-table-column`在`tableColumn`数组中的位置。 在`mounted`生命周期钩子中，`...
element-ui table 表格组件实现可拖拽效果（行、列）
热门推荐
weixin_41897680的博客
11-23 2万+
element-ui table 表格组件实现可拖拽效果（行、列）
Element el-table表格表头拖拽、行拖拽组件封装详细教程【简单粗暴】
dingdingdandan
05-26 4901
文章目录简介安装2. 使用3. 解析及常见问题3.1 行拖拽3.2 表头列拖拽 简介 el-table+Sortable.js实现表头拖拽、行拖拽 Sortable.js Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。 效果 安装.
Element table 实现表格行、列拖拽功能 以及指定区域拖动
weixin_45776545的博客
02-23 2200
【代码】Element table 实现表格行、列拖拽功能。
el-table实现拖拽效果
柒个橙子的博客
11-12 5581
一、概述 Sortable.js是一款优秀的js拖拽库，支持IE9及以上版本IE浏览器和现代浏览器，也可以运行在移动触摸设备中，不依赖jQuery，支持AngularJS、React、Vue框架和任何CSS库，如bootstrap、elementUI，可以用来拖拽div、table等元素。 二、安装插件 npm i -S vuedraggable vuedraggable依赖Sortable.js，我们可以直接引入Sortable使用Sortable的特性。 vuedraggable是Sortable的一
vue+el-table行排序 【上移下移】【拖拽排序】
07-26 6782
安装vuedraggable。
ElementuiPlus的table组件实现行拖动与列拖动
qq_52845451的博客
11-03 3298
table组件实现行和列的拖动
el-table 实现行拖拽排序
yueye_wu的博客
12-20 1541
el-table 实现行拖拽排序
el-table和sortablejs实现行拖拽，遇到的坑
m0_68748513的博客
11-08 667
到这里本该结束了，轻车熟路（以前使用过一次）。转折来了这次使用拖拽后表格中的显示的始终都不是自己拖拽后的，但是打印出表格数据又是正确的。翻了下以前写的代码跟这次写的一摸一样但是这次拖动后显示的数据始终都不是拖拽后的样子。找了很久，大概三个小时的问题，各种骚操作想了一大堆。删除的代码的时候发现这里使用的是假数据，对象中并没有ID字段。我把对象中加上ID字段，再次拖动就好了。把这个唯一标识忘得一干二净！3.HTML代码 表格代码。2.script部分代码。
vue中使用el-table如何实现列表间的拖拽功能
05-18
在 Vue 中使用 `el-table` 实现列表间的拖拽功能，可以借助 `sortablejs` 插件。`sortablejs` 是一个基于原生 JavaScript 的拖拽排序库，其支持 Vue 等框架。 下面是实现步骤： 1. 安装 `sortablejs` 插件 ```bash npm install sortablejs --save ``` 2. 在 Vue 组件中引入 `sortablejs` ```javascript import Sortable from 'sortablejs'; ``` 3. 在 `mounted` 钩子中初始化 `sortablejs` ```javascript mounted() { const table = document.getElementById('table'); const options = { animation: 150, onEnd: this.onEndHandler }; Sortable.create(table, options); }, ``` 其中，`table` 是 `el-table` 对应的 DOM 元素，`options` 是 `Sortable` 的一些配置项。`onEndHandler` 是当拖拽结束时的回调函数，需要自己实现。 4. 实现 `onEndHandler` 回调函数 ```javascript methods: { onEndHandler(event) { const { oldIndex, newIndex } = event; const newData = [...this.tableData]; const [removed] = newData.splice(oldIndex, 1); newData.splice(newIndex, 0, removed); this.tableData = newData; }, }, ``` 其中，`tableData` 是 `el-table` 的数据源，当拖拽结束后，根据 `oldIndex` 和 `newIndex` 获取被拖拽的元素和目标位置，然后在数据源中重新排序。 5. 在 `el-table` 中添加 `:row-key` 属性 ```html <el-table :data="tableData" :row-key="row => row.id" id="table"> ... </el-table> ``` 这里需要为 `el-table` 指定一个唯一的 `row-key`，以便在拖拽结束后能够正确地更新数据源。 完成以上步骤后，即可在 `el-table` 中实现列表间的拖拽功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值