当前位置: 首页 > news >正文

element 表格拖拽保存插件

这是以前看着一篇文章

1.下载包
npm install sortablejs --save
2.在页面中引入,或者全局引入
import Sortable from ‘sortablejs’
3.在template中

<div id="second"><el-tableclass="threeTable":style="{'height':tableData.length === 0 ? '100px' : 'auto'}":data="tableData"stripestyle="width: 100%;"highlight-current-row:header-cell-style="headerCellStyle"row-key="proCode"><el-table-column type="index" label="序号" width="58"></el-table-column><el-table-column prop="proCode" label="供方编码"></el-table-column><el-table-column prop="proDesc" label="供方名称"></el-table-column><el-table-column label="操作" width="80"><template slot-scope="scope"><el-tooltip class="tree-item" effect="dark" content="删除" placement="top"><el-button type="text" class="" @click="deleteTable(scope.row, scope.$index)"><icon-svg icon-class="iconshanchu" /></el-button></el-tooltip></template></el-table-column></el-table>
</div>

在script中

<script>mounted () {this.rowDrop()},methods: {// 行拖拽rowDrop () {const tbody = document.querySelector('#second .el-table__body-wrapper tbody')const _this = thisSortable.create(tbody, {onEnd ({newIndex, oldIndex}) {const currRow = _this.tableData.splice(oldIndex, 1)[0]_this.tableData.splice(newIndex, 0, currRow) // _this.tableData换成自己的表格即可}})},}
</script>

相关文章:

element 表格拖拽保存插件

这是以前看着一篇文章 1.下载包 npm install sortablejs --save 2.在页面中引入&#xff0c;或者全局引入 import Sortable from ‘sortablejs’ 3.在template中 <div id"second"><el-tableclass"threeTable":style"{height:tableData.len…...

通过内网穿透,在Windows 10系统下搭建个人《我的世界》服务器公网联机

文章目录 1. Java环境搭建2.安装我的世界Minecraft服务3. 启动我的世界服务4.局域网测试连接我的世界服务器5. 安装cpolar内网穿透6. 创建隧道映射内网端口7. 测试公网远程联机8. 配置固定TCP端口地址8.1 保留一个固定tcp地址8.2 配置固定tcp地址 9. 使用固定公网地址远程联机 …...

C++11异步任务轮子实现(header-only)

为什么写这个 C17异步任务需要future和promise配合使用&#xff0c;不是很喜欢那种语法。实现一个操作简洁的异步任务。 满足功能 异步任务超时控制get接口同步任务计时lambda回调任务重启 使用 #include "async_callback.h" #include <unistd.h> #includ…...

2023华为杯研究生数学建模竞赛选题建议+初步分析

如下为C君的2023华为杯研究生数学建模竞赛&#xff08;研赛&#xff09;选题建议初步分析 2023华为杯研究生数学建模竞赛&#xff08;研赛&#xff09;选题建议 提示&#xff1a;DS C君认为的难度&#xff1a;CE<D<F&#xff0c;开放度&#xff1a;CDE<F。 华为专项…...

多线程并发或线程安全问题如何解决

1、通过volatile关键字修饰变量&#xff0c;可以实现线程之间的可见性&#xff0c;避免变量脏读的出现&#xff0c;底层是通过限制jvm指令的重新排序实现的&#xff0c;适用于一个线程修改&#xff0c;多个线程读的场景。 2、通过synchronized锁&#xff08;任意对象&#xff0…...

深度学习——线性神经网络一

深度学习——线性神经网络一 文章目录 前言一、线性回归1.1. 线性回归的基本元素1.1.1. 线性模型1.1.2. 损失函数1.1.3. 解析解1.1.4. 随机梯度下降1.1.5. 用模型进行预测 1.2. 向量化加速1.3. 正态分布与平方损失1.4. 从线性回归到深度网络 二、线性回归的从零开始实现2.1. 生…...

利用大模型知识图谱技术,告别繁重文案,实现非结构化数据高效管理

我&#xff0c;作为一名产品经理&#xff0c;对文案工作可以说是又爱又恨&#xff0c;爱的是文档作为嘴替&#xff0c;可以事事展开揉碎讲清道明&#xff1b;恨的是只有一个脑子一双手&#xff0c;想一边澄清需求一边推广宣传一边发布版本一边申报认证实在是分身乏术&#xff0…...

Java抽象类和普通类区别、 数组跟List的区别

抽象类 Java中的抽象类是一种特殊的类&#xff0c;它不能被实例化&#xff0c;只能被继承。抽象类通常用于定义一些通用的属性和方法&#xff0c;但是这些方法的具体实现需要在子类中完成。抽象类中可以包含抽象方法和非抽象方法。 抽象方法是一种没有实现的方法&#xff0c;…...

Leetcode.2522 将字符串分割成值不超过 K 的子字符串

题目链接 Leetcode.2522 将字符串分割成值不超过 K 的子字符串 rating : 1605 题目描述 给你一个字符串 s s s &#xff0c;它每一位都是 1 1 1 到 9 9 9 之间的数字组成&#xff0c;同时给你一个整数 k k k 。 如果一个字符串 s s s 的分割满足以下条件&#xff0c;我们…...

成绩分析(蓝桥杯)

成绩分析 题目描述 小蓝给学生们组织了一场考试&#xff0c;卷面总分为 100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。 请计算这次考试的最高分、最低分和平均分。 输入描述 输入的第一行包含一个整数 n (1≤n≤104 )&#xff0c;表示考试人数。 接下来 n 行…...

【多思路附源码持续更新】2023年华为杯(中国研究生数学建模)竞赛C题

赛题 若官网拥挤&#xff0c;数据集和赛题下载地址如下&#xff1a; https://download.csdn.net/download/weixin_47723732/88364777 历届优秀论文下载地址&#xff0c;可以做参考文章 https://download.csdn.net/download/weixin_47723732/88365222 论文万能模板下载地址 htt…...

基于STM32设计的校园一卡通(设计配套的手机APP)

一、功能介绍 【1】项目介绍 随着信息技术的不断发展,校园一卡通作为一种高效便捷的管理方式,已经得到了广泛的应用。而其核心部件——智能卡也被越来越多的使用者所熟知。 本文介绍的项目是基于STM32设计的校园一卡通消费系统,通过RC522模块实现对IC卡的读写操作,利用2…...

有了Spring为什么还需要SpringBoot呢

目录 一、Spring缺点分析 二、什么是Spring Boot 三、Spring Boot的核心功能 3.1 起步依赖 3.2 自动装配 一、Spring缺点分析 1. 配置文件和依赖太多了&#xff01;&#xff01;&#xff01; spring是一个非常优秀的轻量级框架&#xff0c;以IOC&#xff08;控制反转&…...

【记录】Python 之于 C/C++ 区别

记录本人在 Python 上经常写错的一些地方&#xff08;C/C 写多了&#xff0c;再写 Python 有点切换不过来&#xff09; 逻辑判断符号用 and、or、!可以直接 10 < num < 30 比较大小分支语句&#xff1a;if、elif、else使用 、-&#xff0c;Python 中不支持 、- - 这两个…...

【Vue-Element-Admin】dialog关闭回调事件

背景 点击导入按钮&#xff0c;调出导入弹窗&#xff0c;解析excel数据后&#xff0c;不点击【确认并导入】按钮&#xff0c;直接关闭弹窗&#xff0c;数据违背清理 实现 使用dialog的close回调函数&#xff0c;在el-dialog添加close&#xff0c;在methods中定义closeDialog…...

Ansible自动化:简化你的运维任务

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

webpack配置alias后eslint和ts无法识别

背景 我们在 webpack 配置 alias 后&#xff0c;发现项目中引入的时候&#xff0c;还是会报错&#xff0c;如下&#xff1a; 可以看到&#xff0c;有一个是 ts报错&#xff0c;还有一个是 eslint 报错。 解决 ts 报错 tsconfig.json {"compilerOptions": {...&q…...

小程序从无到有教学教程-- 01.重置华为云服务器Huawei Cloud EulerOS 2.0版本并且设置安全组

概述 专门拿了专栏来讲解&#xff0c;所以目录结构就比较简单了 文章目录 概述修改华为云操作系统选择Huawei Cloud EulerOS 2.0 镜像顺便配置华为安全组 修改华为云操作系统 这里选择华为最新的系统&#xff0c;不过也就2.0~ 选择Huawei Cloud EulerOS 2.0 镜像 这里记住密…...

js实现短信验证码一键登录

前言 短信验证码一键登录是一种方便快捷的登录方式&#xff0c;用户只需输入手机号码&#xff0c;然后接收到手机短信验证码并自动填入验证码框&#xff0c;即可完成登录操作。本文将介绍短信验证码一键登录的原理&#xff0c;并给出一个简单的示例说明。 短信验证码一键登录…...

vue2的基础知识巩固

一、定义&#xff1a;是一个渐进式的JavaScript框架 二、特点&#xff1a; 减少了大量的DOM操作编写 &#xff0c;可以更专注于逻辑操作分离数据和界面的呈现&#xff0c;降低了代码耦合度(前端端分离)支持组件化开发&#xff0c;更利于中大型项目的代码组织 vue2核心功能&a…...

echart离线地图下载地址

链接: 离线地图地址 https://datav.aliyun.com/portal/school/atlas/area_selector...

elk日志某个时间节点突然搜索不到了

elk日志某个时间节点突然搜索不到了,检查filebeat正常 Kibana手动上传数据: 响应: Error: Validation Failed: 1: this action would add [2] total shards, but this cluster currently has [2000]/[2000] maximum shards open 原因:ElasticSearch总分片数量导致的异常,ES…...

dbeaver 导出的sql文件,恢复数据库报错,Unknown command ‘\‘‘.

这是因为编码格式错误导致的&#xff0c; 加上这个即可 &#xff08;注意前后不能有空格&#xff09; --default-character-setutf8mb4...

Android.bp常用语法和预定义属性

介绍 Android.bp是Android构建系统中用于定义模块和构建规则的配置文件&#xff0c;它使用一种简单的声明式语法。以下是Android.bp的一些常见语法规则和约定&#xff1a; 注释&#xff1a; 单行注释使用//符号。 多行注释使用/和/包围。 和go语言相同 // 这是单行注释 /* 这是…...

close和fclose

在Linux系统中&#xff0c;close函数并不会主动调用fsync接口。close函数只是关闭了文件描述符&#xff0c;而不保证数据被写入到磁盘。如果你想确保数据被写入到磁盘&#xff0c;你需要在close函数之前调用fsync函数。这是因为Linux使用了缓存机制来提高磁盘的读写性能&#x…...

在已知的二维坐标里找到最接近的点

一、业务场景 最近在研发的项目&#xff0c;在做可视化层&#xff0c;在全球地图上&#xff0c;对我们的国家的陆地地图经纬度按照步长为1的间隔做了二维处理。在得到一组整数的点位信息后&#xff0c;需要将我们已有的数据库数据(业务项目)按照地址的经纬度&#xff0c;映射到…...

spring boot 八、 sharding-jdbc 分库分表 按月分表

在项目resources目录下新建com.jianmu.config.sharding.DateShardingAlgorithm 文件 新增yaml配置 数据源 spring:shardingsphere:props:sql:#是否在日志中打印 SQLshow: true#打印简单风格的 SQLsimple: truedatasource:names: pingxuanlogpingxuanlog:type: com.alibaba.dru…...

Java 8 中Stream流的一些用法

public class Djmxlist {private String dxmc;private Integer sl;public String getDxmc() {return dxmc;}public void setDxmc(String dxmc) {this.dxmc dxmc;}public Integer getSl() {return sl;}public void setSl(Integer sl) {this.sl sl;} }插入一下数据 List<Djm…...

Elasticsearch 8.10 中引入查询规则 - query rules

作者&#xff1a;Kathleen DeRusso 我们很高兴宣布 Elasticsearch 8.10 中的查询规则&#xff01; 查询规则&#xff08;query rules&#xff09;允许你根据正在搜索的查询词或根据作为搜索查询的一部分提供的上下文信息来更改查询。 什么是查询规则&#xff1f; 查询规则&…...

Windows PostgreSql 创建多个数据库目录

1 使用默认用户Administrator 1.1初始化数据库目录 E:\Program Files\PostgreSQL\13> .\bin\initdb -D G:\DATA\pgsql\data3 -W -A md5 1.2连接数据库 这时User为Administrator&#xff0c;密码就是你刚才设置的&#xff0c;我设置的为123456&#xff0c;方便测试。 2 添加…...

汕头建设网站/如何引流与推广

碰到一个诡异的bitmap回收问题&#xff0c;抛出了使用了recycled的bitmap。最终分析是Bitmap.createBitmap(Bitmap bitmap)造成的&#xff0c;Bitmap.createBitmap(。。。)都有此可能。这个方法的注释如下&#xff1a;Returns an immutable bitmap from subset of the source b…...

网站建设需要多少工种/优秀企业网站欣赏

排序在我们的生活和生产中是很重要的, 据说在计算时代早期, 大家普遍认为30%的计算周期都用在了排序上, 现在的这个比例下降了, 原因可能是排序算法更加高效, 但绝不可能是因为排序的重要性降低了 这篇文章不会像书上说的那样实现Comparable接口, 接下来的所有代码都将是对整型…...

网站建设全包/青岛网络推广公司

16转换 10 进制&#xff1a; .toString("X"); 10转换 16 进制&#xff1a; .toString("X2");转载于:https://www.cnblogs.com/Iyce/archive/2012/11/15/2771627.html...

做素材网站存储/百度sem代运营

最佳答案//index下标从0开始public static int[] remove(int[]ary,int index){int[]array new int[ary.length-1]; //返回数组int flag 0; //作为标识&#xff0c;表示是否已删除index位置处的值,0表示未到//满足以下条件&#xff0c;返回nullif(arynull||ary.length<1||i…...

网站平台建设公司/小广告多的网站

DOM编程不仅仅可以查找三种节点&#xff0c;也可以操作节点&#xff0c;那就是创建&#xff0c;插入&#xff0c;删除&#xff0c;替换和复制节点。先来看节点 操作方法&#xff1a; 还是借用一贯的HTML代码&#xff1a; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1…...

优秀网站建设方案/nba最新新闻新浪

因为txt默认的选项是ANSI&#xff0c;即GBK编码。GBK和GB2312都是中文编码&#xff0c;先解释一下两者的区别。总体说来&#xff0c;GBK包括所有的汉字&#xff0c;包括简体和繁体。而gb2312则只包括简体汉字。GBK编码是中国大陆制订的、等同于UCS的新的中文编码扩展国家标准。…...