element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示:vue+element+

通过阅读element文档我们发现element并不提供拖拽相关的api 

本博客通过element提供的行类名 注册函数  实现行与行的拖拽

1.设置el-table 的行样式类名

 这里是用的是 function  

            <el-table:data="outputData":row-class-name="activeClass"class="outputTable">.....</el-table>
    activeClass ({ row, rowIndex }) {if (rowIndex === this.newDragIndex) {return 'isDragBox active-drag'}return 'isDragBox'}

 2.在mounted获取到row元素

将row设置为的draggable:true拖拽的类型

注册监听函数:

dragstart-拖拽开始 获取拖拽的当前元素index

dragover-拖拽中途 获取拖拽停留的元素的new index

dragEnd-拖拽结束 将数据进行变化

this.$nextTick(() => {const dragBox = document.querySelectorAll('.outputTable .isDragBox')dragBox.forEach((i, idx) => {i.setAttribute('draggable', 'true')i.ondragstart = () => this.dragStartItem(idx)i.ondragover = () => this.dragOverItem(idx)i.ondragend = () => this.dragEndItem()})
})

3.dragEnd获取拖拽元素的数据data

将table表格数据去除掉原有的元素 ,将新元素添加到新坐标

    dragStartItem (idx) {this.dragIndex = idx},dragOverItem (index) {this.newDragIndex = index},dragEndItem () {const data = this.outputData[this.dragIndex]this.outputData.splice(this.dragIndex, 1)this.outputData.splice(this.newDragIndex, 0, data)},

 4.css美化 增加蓝色下划线

注意这里 z-index一定要加否则下划线无法超过table层级无法显示

.isDragBox{cursor: move;position: relative;
}
.active-drag{position: relative;&::after {content: '';position: absolute;top: -1px;left: 0;width: 100%;height: 2px;background-color: #4B79F3;z-index:99;}
}

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

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

相关文章

Vue知识系列(3)每天10个小知识点

目录 系列文章目录Vue知识系列&#xff08;1&#xff09;每天10个小知识点Vue知识系列&#xff08;2&#xff09;每天10个小知识点 知识点**21. Vue不同生命周期**的概念、作用、原理、特性、优点、缺点、区别、使用场景**22. Vue 子组件和父组件执行顺序****23. created 和 mo…

H.265 视频在浏览器中的播放问题探究

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…

2023/9/12 -- C++/QT

作业 实现一个图形类&#xff08;Shape&#xff09;&#xff0c;包含受保护成员属性&#xff1a;周长、面积&#xff0c; 公共成员函数&#xff1a;特殊成员函数书写 定义一个圆形类&#xff08;Circle&#xff09;&#xff0c;继承自图形类&#xff0c;包含私有属性&#xf…

蓝蓝设计为教育行业提供软件UI交互设计服务

在教育行业&#xff0c;软件的用户体验设计对于提供优质教育体验至关重要。教育行业软件用户体验设计需要考虑到学生和教师的需求&#xff0c;以及教育环境的特殊性。为了确保设计的成功&#xff0c;选择一家专业的设计公司是至关重要的&#xff0c;而北京蓝蓝设计公司就是您的…

X86_64函数调用汇编程序分(2)

X86_64函数调用汇编程序分&#xff08;2&#xff09; 1 X86_64寄存器使用标准2 leaveq和retq指令2.1 leaveq2.2 retq 3 执行leaveq和retq之后栈的结构3.1 执行leaveq之后栈的结构3.1.1 test_fun_b函数执行leaveq之前的栈结构示意图3.1.2 test_fun_b函数执行leaveq之后的栈结构示…

Charles的Map Remote功能

1、charles的Map Remote功能&#xff08;指定的网络请求重定向到另一个网址&#xff09;&#xff0c;说白了就是你本来要请求A接口拿数据&#xff0c;重定向后&#xff0c;你实际请求的是B接口&#xff0c;拿到的是B接口返回的数据。 入口Tools->Map Remote 本次测试过程中…

ubuntu

1、下载驱动 https://www.nvidia.cn/geforce/drivers/ 2、禁用系统自带的nouveau驱动 2.1查看系统是否使用nouveau lsmod | grep nouveau 若有输出则未禁用 2.2禁用 修改blacklist.conf配置 blacklist.conf文件的位置&#xff1a;/etc/modprobe.d/blacklist.conf 不管是通过…

第三节:在WORD为应用主窗口下关闭EXCEL的操作(2)

【分享成果&#xff0c;随喜正能量】凡事好坏&#xff0c;多半自作自受&#xff0c;既不是神为我们安排&#xff0c;也不是天意偏私袒护。业力之前&#xff0c;机会均等&#xff0c;毫无特殊例外&#xff1b;好坏与否&#xff0c;端看自己是否能应机把握&#xff0c;随缘得度。…

KV Cache

大模型推理加速的一个常用技术是KV Cache&#xff0c;在不牺牲任何计算精度的前提下&#xff0c;通过空间换时间&#xff0c;提高推理性能。注意&#xff0c;这里的Cache概念非常简单&#xff0c;跟浏览器缓存、CPU缓存不是一个概念。 在生成式模型的推理过程中&#xff0c;假设…

Trinitycore学习之在vscode查看远端服务器上源码配置

1&#xff1a;安装vscode&#xff0c;去官网下载&#xff0c;这里下载windows版本安装包 .zip https://code.visualstudio.com/Download 2&#xff1a;安装后&#xff0c;安装扩展chinese&#xff0c;使用中文设置&#xff0c;需要重启vscode。 3&#xff1a;安装ssh相关插件…

Springmvc之JSR303和拦截器

JSR303拦截器 1.JSR303 什么是JSR303 JSR是Java Specification Requests的缩写&#xff0c;意思是Java 规范提案。是指向JCP(Java Community Process)提出新增一个标准化技术规范的正式请求。任何人都可以提交JSR&#xff0c;以向Java平台增添新的API和服务。JSR已成为Java界的…

06目标检测-One-stage的目标检测算法

一、 One-stage目标检测算法 使用CNN卷积特征直接回归物体的类别概率和位置坐标值&#xff08;无region proposal&#xff09;准确度低&#xff0c;速度相对two-stage快 二、One-stage基本流程 输入图片------对图片进行深度特征的提取&#xff08;主干神经网络&#…

常用命令(Linux、Git、g++、gdb)

文章目录 一、Linux1、解压缩2、远程操作文件 二、Git三、g四、gdb 一、Linux 1、解压缩 // 压缩文件及文件夹 tar -zcvf test.tar.gz file1 file2 dir1 dir2// 解压到当前目录 tar -xvf qtcreator-v7.0.0.tar.xz2、远程操作文件 &#xff08;1&#xff09;远程操作服务器&a…

跨平台游戏引擎 Axmol-2.0.0 正式发布

下载 https://github.com/axmolengine/axmol/releases/tag/v2.0.0 更新日志 添加实验性的 WebAssembly 构建支持(WebGL 2.0)&#xff0c;由 nowasm 贡献 已知问题 WebGL context lost 尚未处理 部署在 github pages 的 demo 可快速预览&#xff0c;注意&#xff1a;由于 Git…

苹果数据恢复软件:Omni Recover Mac

Omni Recover是一款十分实用的Mac数据恢复软件&#xff0c;为用户提供了简单、安全、快速和高效的数据恢复服务。如果您遇到了Mac或iOS设备中的数据丢失和误删情况&#xff0c;不要着急&#xff0c;不妨尝试一下Omni Recover&#xff0c;相信它一定会给您带来惊喜。 首先&…

CSS选择器

基本选择器 通配选择器 可以选中所有的HTML元素&#xff0c;清除样式时可以使用 * {color: orange;font-size: 40px; }元素选择器 为元素统一设置样式&#xff0c;故无法实现差异化设置 /* 为所有h1元素添加样式 */ h1 {color: red;font-size: 60px; }/* 为所有p元素添加样…

【C++ • STL • 力扣】详解string相关OJ

文章目录 1、仅仅翻转字母2、字符串中的第一个唯一字符3、字符串里最后一个单词的长度4、验证一个字符串是否是回文5、字符串相加总结 ヾ(๑╹◡╹)&#xff89;" 人总要为过去的懒惰而付出代价 ヾ(๑╹◡╹)&#xff89;" 1、仅仅翻转字母 力扣链接 代码1展示&…

ENVI_IDL: 基础语法详解

01 题目 02 代码说明 题目本身很简单&#xff0c;但是我自己加了一些东西进去增加难度。主要包括print函数的封装、格式化字符串&#xff0c;但是不影响代码的阅读。&#xff08;注&#xff1a;对于没有语言基础的人而言相对阅读困难&#xff0c;但是由于IDL是解释型语言&…

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮

antd react 文件上传只允许上传一个文件且上传后隐藏上传按钮 效果图代码解析 效果图 代码解析 import { Form, Upload, message } from antd; import { PlusOutlined } from ant-design/icons; import { useState, useEffect } from react; import { BASE_URL } from /utils/…

网络爬虫-----初识爬虫

目录 1. 什么是爬虫&#xff1f; 1.1 初识网络爬虫 1.1.1 百度新闻案例说明 1.1.2 网站排名&#xff08;访问权重pv&#xff09; 2. 爬虫的领域&#xff08;为什么学习爬虫 ?&#xff09; 2.1 数据的来源 2.2 爬虫等于黑客吗&#xff1f; 2.3 大数据和爬虫又有啥关系&…