009:vue结合el-table实现表格行拖拽排序(基于sortablejs)

文章目录

  • 1. 实现效果
  • 2. 安装 `sortablejs` 插件
  • 3. 完整组件代码
  • 4. 注意点

1. 实现效果

请添加图片描述

2. 安装 sortablejs 插件

sortablejs 更多用法

cnpm i --save sortablejs

3. 完整组件代码

<template><div class="home"><div class="body"><el-table :data="tableData" border row-key="date" class="draggable-table" style="width: 100%"><el-table-column prop="sortNo" label="序号"><template slot-scope="{ row }"><imgclass="handle":src="require('./icon-drop.png')"style="width: 20px; height: 20px; object-fit: contain"/></template></el-table-column><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div></div>
</template><script>import Sortable from 'sortablejs'export default {name: 'Demo',data() {return {tableData: [// 略去数据,与前段代码一直{ date: '2024-01-02', name: '张三1', address: '深圳市' },{ date: '2024-01-03', name: '李四2', address: '成都市' },{ date: '2024-01-04', name: '王五3', address: '重庆市' },{ date: '2024-01-05', name: '麻六4', address: '上海市' },{ date: '2024-01-07', name: 'kk5', address: '上海市01' },{ date: '2024-01-08', name: 'fantay6', address: '上海市02' },],}},mounted() {const tbody = document.querySelector('.draggable-table .el-table__body-wrapper tbody')new Sortable(tbody, {handle: '.handle', // handle's classanimation: 150,// 需要在odEnd方法中处理原始eltable数据,使原始数据与显示数据保持顺序一致onEnd: ({ newIndex, oldIndex }) => {const targetRow = this.tableData[oldIndex]this.tableData.splice(oldIndex, 1)this.tableData.splice(newIndex, 0, targetRow)console.table(this.tableData)},})},}
</script><style scoped lang="scss">.home {.body {width: 890px;height: 500px;border: #ff3366 solid 10px;box-sizing: border-box;padding: 20px;box-sizing: border-box;}}.handle {cursor: move;display: flex;align-content: center;}
</style>

4. 注意点

  1. 很多文章使用 Sortable.create 但是我这样用没生效,使用 new Sortable 就行了
  2. 页面table添加类 draggable-table
  3. handle 可以配置可拖拽的指定元素,默认是当前行触发

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

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

相关文章

pytorch深度学习笔记(共计169页,基于本人听完B站小土堆PyTorch深度学习快速入门教程所写)

一、笔记视频 pytorch深度学习&#xff08;共计169页&#xff0c;基于本人听完B站小土堆PyTorch深度学习快速入门教程所写&#xff09; 二、获取方式 方式一&#xff1a; 点击下面的链接 pytorch深度学习笔记 如果链接无法打开 直接复制下方链接即可 https://mall.bilibili.c…

appium入门基础

介绍 appium支持在不同平台的UI自动化&#xff0c;如web,移动端,桌面端等。还支持使用java&#xff0c;python&#xff0c;js等语言编写自动化代码。主要用于自动化测试脚本&#xff0c;省去重复的手动操作。 Appium官网 安装 首先必须环境有Node.js用于安装Appium。 总体来…

【前缀和】【分类讨论】【二分查找】2983:回文串重新排列查询

作者推荐 【动态规划】【字符串】C算法&#xff1a;正则表达式匹配 本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 二分查找算法合集 回文串重新排列查询 给你一个长度为 偶数 n &#xff0c;下标从 0 开始的字符…

Pandas数据可视化

pandas库是Python数据分析的核心库 它不仅可以加载和转换数据&#xff0c;还可以做更多的事情&#xff1a;它还可以可视化 pandas绘图API简单易用&#xff0c;是pandas流行的重要原因之一 Pandas 单变量可视化 单变量可视化&#xff0c; 包括条形图、折线图、直方图、饼图等 …

精确率(Precision,P),召回率(Recall,R)以及F1值(F1-score,F1)

狗狗识别系统的例子&#xff1a; 假设我们有两个集合&#xff1a; 实际狗狗的集合&#xff08;实际真正是狗狗的图片&#xff09;&#xff1a;A我们识别为狗狗的集合&#xff08;我们认为是狗狗的图片&#xff09;&#xff1a;B 精确率&#xff08;Precision&#xff0c;P&am…

Codeium在IDEA里的3个坑

转载自Codeium在IDEA里的3个坑&#xff1a;无法log in&#xff0c;downloading language server和中文乱码_downloading codeium language server...-CSDN博客文章浏览阅读1.7w次&#xff0c;点赞26次&#xff0c;收藏47次。Codeium安装IDEA插件的3个常见坑_downloading codeiu…

一文初识Linux进程(超详细!)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;HEART BEAT—YOASOBI 2:20━━━━━━️&#x1f49f;──────── 5:35 &#x1f504; ◀️ ⏸ ▶️ ☰ …

Linux实战:部署基于Postfix 与 Dovecot 的邮件系统

一、电子邮件系统简介 在电子邮件系统中&#xff0c;为用户收发邮件的服务器名为邮件用户代理&#xff08;Mail User Agent&#xff0c;MUA&#xff09;&#xff0c;MTA &#xff08;邮件传输代理&#xff09;的工作职责是转发处理不同电子邮件服务供应商之间的邮件&#xff0…

Java EE Servlet之Cookie 和 Session

文章目录 1. Cookie 和 Session1.1 Cookie1.2 理解会话机制 (Session)1.2.1 核心方法 2. 用户登录2.1 准备工作2.2 登录页面2.3 写一个 Servlet 处理上述登录请求2.4 实现登录后的主页 3. 总结 1. Cookie 和 Session 1.1 Cookie cookie 是 http 请求 header 中的一个属性 浏…

网络交换机端口管理会面临的问题

交换机端口管理是跟踪网络交换机及其端口连接详细信息的过程&#xff0c;在大型网络中&#xff0c;交换机端口管理过程通常使用自动化交换机端口管理工具执行。 通过网络交换机端口提供的完全控制和可见性使交换机端口管理工具在管理网络时必不可少&#xff0c;在网络中部署交…

【SpringCloud】从实际业务问题出发去分析Eureka-Server端源码

文章目录 前言1.EnableEurekaServer2.初始化缓存3.jersey应用程序构建3.1注册jeseryFilter3.2构建JerseyApplication 4.处理注册请求5.registry&#xff08;&#xff09; 前言 前段时间遇到了一个业务问题就是k8s滚动发布Eureka微服务的过程中接口会有很多告警&#xff0c;当时…

Halcon闭运算closing

Halcon闭运算 文章目录 Halcon闭运算 闭运算的计算步骤&#xff0c;为先膨胀&#xff0c;后腐蚀。这两步操作能将看起来很接近的元素&#xff0c;如区域内部的空洞或外部孤立的点连接成一体&#xff0c;区域的外观和面积也不会有明显的改变。通俗地说&#xff0c;就是类似于“填…

解决Hive在DataGrip 中注释乱码问题

注释属于元数据的一部分&#xff0c;同样存储在mysql的metastore库中&#xff0c;如果metastore库的字符集不支持中文&#xff0c;就会导致中文显示乱码。 不建议修改Hive元数据库的编码&#xff0c;此处我们在metastore中找存储注释的表&#xff0c;找到表中存储注释的字段&a…

听GPT 讲Rust源代码--library/alloc(2)

File: rust/library/alloc/src/vec/mod.rs 在Rust源代码中&#xff0c;rust/library/alloc/src/vec/mod.rs这个文件是Rust标准库中的Vec类型的实现文件。Vec是一个动态大小的数组类型&#xff0c;在内存中以连续的方式存储其元素。 具体来说&#xff0c;mod.rs文件中定义了以下…

【网络面试(5)】收发数据及断开服务器(四次挥手)

前面了解到服务器和客户端在创建套接字&#xff0c;建立连接后&#xff0c;就可以进入到下一步&#xff0c;双发可以互相发送和接收数据&#xff0c;本篇博客就来学习一下这个过程。  我们印象里&#xff0c;发送数据应该是我们在浏览器输入网址&#xff0c;敲击回车的一瞬间&…

【Python】ubuntu python>3.9编译安装,及多个Python版本并存的使用方法

【Python】ubuntu python3.9编译安装&#xff0c;及多个Python版本并存的使用方法 1. 安装依赖2. 编译与安装2.1 依赖与源获取2.2 配置2.3 编译2.4 安装2.5 建立软连接 链接动态库 3. 多版本兼容 1. 安装依赖 更新系统软件 在正式开始之前&#xff0c;建议首先检查系统软件是否…

FairGuard游戏加固产品常见问题解答

针对日常对接中&#xff0c;各位用户对FairGuard游戏加固方案在安全性、稳定性、易用性、接入流程等方面的关注&#xff0c;我们梳理了相关问题与解答&#xff0c;希望可以让您对产品有一个初步的认知与认可。 Q1:FairGuard游戏加固产品都有哪些功能? A&#xff1a;FairGuar…

VSCode + vite + vue3断点调试配置

没想到这个配置我搞了一上午&#xff0c;网上很多的配置方案都没有效果。总算搞定了&#xff0c;特此记录一下。 首先需要在.vscode文件夹下面创建launch.json配置文件。然后输入如下配置&#xff1a; {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。//…

【AIGC-图片生成视频系列-5】I2V-Adapter:一种用于视频扩散模型的通用图像生成视频适配器

目录 一. 项目与贡献概述 二. 方法详解 a. 整体框架图 b. 帧相似性先验 三. 一般化图像生成动画结果 四. 基于个性化 T2I 模型的动画结果 五. 结合ControlNet动画结果 六. 项目论文和代码 七. 个人思考与总结 在快速发展的数字内容生成领域&#xff0c;焦点已从文本到…

思福迪运维安全管理系统 test_qrcode_b RCE漏洞复现

产品简介 思福迪运维安全管理系统是思福迪开发的一款运维安全管理堡垒机 漏洞描述 由于思福迪运维安全管理系统 test_qrcode_b路由存在命令执行漏洞&#xff0c;攻击者可通过该漏洞在服务器端任意执行代码&#xff0c;写入后门&#xff0c;获取服务器权限&#xff0c;进而控…