Vue.js学习笔记(七)使用sortablejs或el-table-draggable拖拽ElementUI的el-table表格组件

文章目录

  • 前言
  • 一、el-table-draggable是什么?
  • 二、使用步骤
    • 1.安装使用
    • 2.sortablejs
  • 总结


前言

记录 el-table-draggable 插件使用方法。


一、el-table-draggable是什么?

el-table-draggable的存在就是为了让vue-draggable支持element-ui中的el-table组件,让表格可以进行行列拖动等功能。

项目地址:https://gitcode.com/gh_mirrors/el/el-table-draggable

二、使用步骤

1.安装使用

npm i -S el-table-draggable

(示例):拖动修改数据排序,输入修改逻辑为,【1,2,3,4】,修改2为3,则3-1。

<template><el-table-draggable @input="dragInputHandler"><el-table :data="tableData" row-key="id" v-loading="loading" size="mini" max-height="500px"><el-table-column label="展示排序" width="160" prop="sort" align="center" sortable><template slot-scope="{row}"><el-input-number v-model="row.newSort" controls-position="right" :min="1"@change="(newSort) => { editSort(row, newSort) }" @blur="() => {if (!row.newSort) { $message.warning('序号不能为空'); row.newSort = row.sort;};if (Number(row.newSort) <= 0) { $message.warning('序号不能小于1'); row.newSort= row.sort; };}"></el-input-number></template></el-table-column></el-table></el-table-draggable>
</template>import ElTableDraggable from "el-table-draggable";
export default {components: {ElTableDraggable,},methods:{/** 输入修改排序 */editSort(row, rowSort) {if (!rowSort) return;const oldSort = Number(row.sort);const newSort = Math.min(Number(rowSort), this.tableData.length);this.$nextTick(() => {this.tableData = this.tableData.map((item) => {const itemData = { ...item };if (itemData.id === row.id) {itemData.sort = newSort;itemData.newSort = newSort;} else if (oldSort < newSort) {if (itemData.sort > oldSort && itemData.sort <= newSort) {itemData.sort -= 1;itemData.newSort -= 1;}} else if (oldSort > newSort) {if (itemData.sort >= newSort && itemData.sort < oldSort) {itemData.sort += 1;itemData.newSort += 1;}}return itemData;});})},/** 拖拽排序 */dragInputHandler(data) {this.$nextTick(() => {this.tableData = data.map((item, index) => { return { ...item, sort: index + 1,newSort: index + 1 } });});},},
}

2.sortablejs

el-table-draggable插件是基于sortablejs进行封装的,如果已经安装了sortablejs,想实现element的el-table拖拽,则可以进行以下操作。

<template><el-table ref="tableList" :data="tableList" row-key="id" tooltip-effect="dark" max-height="500"  border v-loading="loading" class="draggable"><el-table-column label="拖拽排序" width="80" align="center"><template slot-scope="{ row }"><i class="el-icon-rank allowDrag" style="cursor:pointer"></i></template></el-table-column></el-table>
</template>import Sortable from "sortablejs";
export default {mounted() {this.$nextTick(() => {this.lineDrop();});},methods:{/** 拖拽 */lineDrop() {const tbody = document.querySelector(".draggable .el-table__body-wrapper tbody");const _this = this;new Sortable(tbody, {animation: 150,ghostClass: "ghostClass",handle: ".allowDrag",//设置操作区域onEnd(evt) {const newIndex = evt.newIndex;const row = _this.tableList[newIndex];const oneRow = _this.tableList[newIndex - 1];hotLangSort({id: oneRow.id,langId: _this.searchParams.langId,sort: row.sort,type: _this.activeTab === 'series' ? 0 : 1}).then(res => {_this.$message.success('操作成功')_this.$parent.getInfo();_this.getInfo()}).catch(err => { _this.$message.error('操作失败') }).finally(() => { })}})},}
}

在这里插入图片描述


总结

以上为拖拽插件学习记录。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/52236.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

卸载nomachine

网上的方法:提示找不到命令 我的方法: step1. 终端输入 sudo find / -name nxserver 2>/dev/null确认 NoMachine 的实际安装路径。你可以使用 find 命令在系统中查找 nxserver 脚本的位置。 找到路径后,你可以使用该路径来卸载 NoMachine。 如下图,紫色框中是我的路径…

Android - lock/unlock bootloader

在执行 adb remount 时高版本经常会提示失败 此时就需要对设备的进行解锁操作。记录两个部分&#xff0c;Google解锁和展锐解锁。 目录 一、Google解锁 二、展锐解锁 三、补充跳过按键检测的方案 一、Google解锁 官网介绍的unlock方法如下&#xff1a;锁定/解锁引导加载程序…

RK3588 技术分享 | 在Android系统中使用NPU实现Yolov5分类检测-迅为电子

随着人工智能和大数据时代的到来&#xff0c;传统嵌入式处理器中的CPU和GPU逐渐无法满足日益增长的深度学习需求。为了应对这一挑战&#xff0c;在一些高端处理器中&#xff0c;NPU&#xff08;神经网络处理单元&#xff09;也被集成到了处理器里。NPU的出现不仅减轻了CPU和GPU…

Linux基础环境开发工具gcc/g++ make/Makefile git

1.Linux编译器-gcc/g使用 1. 预处理&#xff08;进行宏替换) 预处理功能主要包括宏定义,文件包含,条件编译,去注释等。 预处理指令是以#号开头的代码行。 实例: gcc –E hello.c –o hello.i 选项“-E”,该选项的作用是让 gcc 在预处理结束后停止编译过程。 选项“-o”是指目标…

【Java数据结构】---二叉树OJ

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 文章目录 相同的树另一颗树的子树翻…

linux死锁问题和cpu使用率过高问题排查

1、问题共同点 死锁问题和cpu使用率过高都是需要我们找出对应的问题线程。 死锁问题需要我们找出哪两个线程出现了死锁情况。 cpu使用率过高需要我们找出哪个或哪些线程占用了大量的cpu。 2、命令排查 2.1、查看机器上的Java进程 jcmd或 jps2.2、查看对应Java进程的线程级别…

五子棋理解C++思想

双人五子棋项目目录&#xff1a; class Game { public:Game();void init();bool waitPlayerPutChess(Player* player, int& oldi, int& oldj);void draw();void play();bool isOver(int playerId);public:int whoWin -1; // 谁赢了&#xff08;0&#xff1a;白棋&a…

科创中心“核”动力|趋动科技:AI算力界的领跑者

近日&#xff0c;趋动科技与深信服正式推出联合解决方案。联合解决方案将深信服EDS的高性能存储与趋动科技OrionX AI算力资源池化软件、以及GeminiAI训练平台有机结合&#xff0c;整合存力与算力资源的同时&#xff0c;帮助用户建好AI平台、管好AI资源、用好AI服务。 双方已完成…

Web3链上聚合器声呐已全球上线,开启区块链数据洞察新时代

在全球区块链技术高速发展的浪潮中&#xff0c;在创新发展理念的驱动下&#xff0c;区块链领域的工具类应用备受资本青睐。 2024年8月20日&#xff0c;由生纳&#xff08;香港&#xff09;国际集团倾力打造的一款链上应用工具——“声呐链上聚合器”&#xff0c;即“声呐链上数…

Facebook的区块链战略:如何在社交媒体中实现去中心化

随着区块链技术的发展&#xff0c;Facebook&#xff08;现Meta&#xff09;正积极探索如何将这一技术整合进其社交平台中&#xff0c;以提升用户体验和数据安全。区块链技术以去中心化、透明性和不可篡改性为特点&#xff0c;为社交媒体带来了新的可能性。本文将探讨Facebook在…

嵌入式和单片机有什么区别?

目录 &#xff08;1&#xff09;什么是嵌入式&#xff1f; &#xff08;2&#xff09;什么是单片机&#xff1f; &#xff08;3&#xff09;嵌入式和单片机的共同点 &#xff08;4&#xff09;嵌入式和单片机的区别 &#xff08;1&#xff09;什么是嵌入式&#xff1f; 关…

Linux云计算 |【第二阶段】SECURITY-DAY1

主要内容&#xff1a; 监控基础&#xff08;系统监控命令、监控软件&#xff09;、Zabbix监控服务端部署、Zabbix监控客户端部署、创建监控主机、调用监控模板、自定义key、创建模板、应用集、监控项、绑定模板&#xff1b; 一、监控概述 1&#xff09;监控的目的 ① 实时报…

【Hot100】LeetCode—114. 二叉树展开为链表

目录 1- 思路技巧——借助指针 2- 实现⭐114. 二叉树展开为链表——题解思路 3- ACM 实现 原题连接&#xff1a;114. 二叉树展开为链表 1- 思路 技巧——借助指针 思路&#xff1a;通过 ① 将左子树的右下结点的 .next ——> 拼接到当前节点的右子树上。 构造 cur 指针&a…

数据结构【链试结构二叉树】

&#x1f31f;个人主页&#xff1a;落叶 目录 ​编辑 实现链式结构⼆叉树 前中后序遍历&#xff1a; 遍历规则 代码实现 前序遍历&#xff1a; 中序遍历&#xff1a; 后序遍历&#xff1a; 图解遍历&#xff1a; 函数递归栈帧图&#xff1a; 结点个数以及高度等 【⼆…

每日OJ_牛客_淘宝网店(日期模拟)

目录 牛客_淘宝网店&#xff08;日期模拟&#xff09; 解析代码 牛客_淘宝网店&#xff08;日期模拟&#xff09; 淘宝网店__牛客网 解析代码 这是一个变相的日期计算器。只不过2、3、5、7、11月算1天&#xff0c;其他7个月算2天。 既然是一个变相的日期计算器&#xff0c;那…

基于STM32开发的智能空气质量监测系统

目录 引言环境准备工作 硬件准备软件安装与配置系统设计 系统架构硬件连接代码实现 系统初始化空气质量监测与处理风扇控制与状态显示Wi-Fi通信与远程监控应用场景 家庭和办公室的空气质量监测室内空气净化器的智能控制常见问题及解决方案 常见问题解决方案结论 1. 引言 空气…

单位信息宣传考核投稿方法不对让我尝尽了苦头

自从我担任单位的信息宣传员以来,便深刻体会到“信息宣传”四个字背后的重量。每月的信息宣传考核任务就像一座大山,压在我心头。起初,我像大多数同行一样,习惯于通过电子邮件向各大媒体投稿,但这种方式让我尝尽了苦头。 记得开始尝试通过邮箱投稿时,我满怀信心地将精心准备的文…

web前端之选项卡集合、动态添加类名、动态移除类名、动态添加样式、激活、间距、节流、tabBar

MENU input的checked属性(HtmlStyle)伪元素(HtmlStyleJavaScript)激活类(HtmlStyleJavaScript)vue伪元素 input的checked属性(HtmlStyle) 前言 代码段创建一个使用HTML和CSS实现的标签式内容切换组件。通过选择不同的标签&#xff0c;可以展示相应的内容。 代码段实现一个简洁…

02 tkinter有趣项目-头像制作-界面设计

头像制界面设计 avatar.png 界面 界面分析 背景图片: 顶部中央位置显示一个小孩背着书包的图片。这个图片是程序的背景&#xff0c;占据了大部分的窗口空间。 标题和按钮: 在图片上方&#xff0c;有一个标题栏&#xff0c;显示文本“在线姓氏头像制作”&#xff0c;使用隶书字…

redis面试(二十)读写锁WriteLock

写锁WriteLock 和读锁一样&#xff0c;在这个地方执行自己的lua脚本&#xff0c;我们去看一下 和read没有多大的区别 KEYS[1] anyLock ARGV[1] 30000 ARGV[2] UUID_01:threadId_01:write hget anyLock mode&#xff0c;此时肯定是没有的&#xff0c;因为根本没这个锁 …