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

Vue+sortable+el-table表格排序使用指南

前言

这两天遇到一个需求:在点击【设置优先级】的按钮后弹出关于玩法类型的table,点击【排序】按钮可以后可以进行排序。由于组内使用的组件库是 element-ui,那我首先就想到了使用 el-table组件,但奈何其版本原因不能相应的拖拽排序的API。了解到有sortable.js。接下来我就以Vue+el-table+sortable 为例看看我是怎么实现这个需求的。

在这里插入图片描述

实现思路

从官网的 demo 以及其他文章的操作中基本上实现过程如下:

const tableData = []const _this = thissetTimeout(()=>{Sortable.create(el, {onEnd:function (evt){// evt 可以获取到拖拽 DOM 在拖拽之前和拖拽之后的 index// 利用这个参数就可以对table中的列表排序const list = tableData; // 备份 table 中的数据const currRow = list.splice(evt.oldIndex, 1)[0]; // 获取当前被拖拽的数据list.splice(evt.newIndex, 0, currRow); // 将拖拽的数据从数组中拿出来并插入到新的位置tableData = [] // 置空 table 中的数据nextTick(()=>{tableData = list // 将最新的数据给table})}})
})

但我在实现过程有遇到几个问题。首先,直接如上所示拖拽功能是没问题的,但是在排序的时候如果不加 nextTicke 那么就会出现你明明只将最后一条数据拖拽到第一行,却出现最后两行出现在了最前面…另外,这里使用 setTimeout是为了确保能拿到DOM,毕竟弹窗时不一定能拿到 table DOM。

源码

由于我是两个table,所以使用了 el-tabs,tab切换时会更新 activeName

  function initSort() {const _this = thissetTimeout(() => {const parentEle = _this.$refs.playTypeTabsRefconst tab1 = parentEle .children[0].querySelectorAll('.el-table__body-wrapper > table > tbody')[0]const tab2 = parentEle .children[1].querySelectorAll('.el-table__body-wrapper > table > tbody')[0]const targetTab = this.activeName === 'playType' ? tab1 : tab2const createSortable = () => {Sortable.create(targetTab, {animation: 150,// ghostClass: 'blue-background-class',// handle: 'handle',draggable: '.el-table__row',onEnd: function(evt) {const list: (IPlayTypeItem | ISubPlayTypeItem)[] = _this.activeName === 'playType' ? _this.playTypeList : _this.subPlayTypeListconst currRow: IPlayTypeItem | ISubPlayTypeItem = list.splice(evt.oldIndex, 1)[0]list.splice(evt.newIndex, 0, currRow)_this.activeName === 'playType' ? _this.playTypeList = [] : _this.subPlayTypeList = []_this.$nextTick(() => {if (_this.activeName === 'playType') {_this.playTypeList = list as IPlayTypeItem[]} else {_this.subPlayTypeList = list as ISubPlayTypeItem[]}})}})}createSortable()}, 0)}

相关文章:

Vue+sortable+el-table表格排序使用指南

前言 这两天遇到一个需求:在点击【设置优先级】的按钮后弹出关于玩法类型的table,点击【排序】按钮可以后可以进行排序。由于组内使用的组件库是 element-ui,那我首先就想到了使用 el-table组件,但奈何其版本原因不能相应的拖拽排…...

表数据删一半,为什么表文件大小不变?

参数innodb_file_per_table 这个参数设置为ON,表示每个表数据单独存在一个文件中,这时如果执行drop命令,系统会直接删除表文件。 这个参数设置为off时,所有表的数据和索引都存在共享的.ibdata文件,即使表删掉了&…...

MoCoOp: Mixture of Prompt Learning for Vision Language Models

文章汇总 当前的问题 1)数据集风格变化。 如图1所示,对于一个数据集,单个软提示可能不足以捕获数据中呈现的各种样式。同一数据集中的不同实例可能与不同的提示符兼容。因此,更**自然的做法是使用多个提示来充分表示这些变化**。 2)过拟合…...

YOLOv8 onnx 部署

本文是在win10系统下进行yolov8目标检测推理的过程记录。 yolov8 已经集成到OpenCV,可以通过两种方式调用,一种是直接通过OpenCV 调用,另外一种是通过onnx runtime(ort)调用。 1、安装cuda 、opencv 等依赖库,具体可以参考 Win1…...

在文件里引用目录文件下的静态资源图片不显示

问题&#xff1a;两种图片路径的指定方式&#xff0c;第一种能展示图片但第二种不能 两个 示例中&#xff0c;图片展示的差异。 在第一个示例中&#xff0c;图片路径是硬编码在 标签的 src 属性中的&#xff1a; <img src"../../assets/img/header01.png" style…...

vue使用 jsplumb 生成流程图

1、安装jsPlumb&#xff1a; npm install jsplumb 2、 在使用的 .vue 文件中引入 import { jsPlumb } from "jsplumb"; 简单示例&#xff1a; 注意&#xff1a;注意看 id 为"item-3"和"item-9"那条数据的连线配置 其中有几个小图片&#x…...

攻坚金融关键业务系统,OceanBase亮相2024金融科技大会

10月15-16日&#xff0c;第六届中新数字金融应用博览会与2024金融科技大会&#xff08;简称“金博会”&#xff09;在苏州工业园区联合举办。此次大会融合了国家级重要金融科技资源——“中国金融科技大会”&#xff0c;围绕“赋能金融高质量发展&#xff0c;金融科技创新前行”…...

《纳瓦尔宝典:财富和幸福指南》读书随笔

最近在罗胖的得到听书中听到一本书&#xff0c;感觉很有启发&#xff0c;书的名字叫《纳瓦尔宝典》&#xff0c;从书名上看给人的感觉应该财富知识类、鸡汤爆棚哪类。纳瓦尔&#xff0c;这个名字之前确实没有听说过&#xff0c;用一句话介绍一下&#xff0c;一个印度裔的硅谷中…...

C++ | STL | 侯捷 | 学习笔记

C | STL | 侯捷 | 学习笔记 文章目录 C | STL | 侯捷 | 学习笔记1 STL概述1.1 头文件名称1.2 STL基础介绍1.3 typename 2 OOP vs. GP3 容器3.1 容器结构分类3.2 序列式容器3.2.1 array测试深度探索 3.2.2 vector测试深度探索 3.2.3 list测试深度探索 3.2.4 forward_list测试深度…...

C函数基础

C语言中的函数教程 在C语言中&#xff0c;函数是一段组织好的、可重复使用的、用于执行特定任务的代码。函数可以提高代码的模块化和可重用性。以下是关于C语言中函数的详细教程。 1. 函数的定义与声明 1.1 函数定义 函数定义包括函数头和函数体。函数头包括函数返回类型、…...

html和css实现页面

任务4 html文件 任务5 htm文件 css文件 任务6 html文件 css文件 任务7 html文件 css文件...

Github_以太网开源项目verilog-ethernet代码阅读与移植(八)——移植工程分享

实验背景 第六篇计划是写项目中各个模块的实现和约束文件的编写&#xff0c;有的小伙伴有裁剪工程的需要&#xff0c;就先分享一个半成品以供参考&#xff0c;由于笔者水平有限&#xff0c;错误肯定会有&#xff0c;望批评指正。 实验内容 移植工程共享 实验步骤 工程一部…...

【大模型实战篇】大模型分词算法BPE(Byte-Pair Encoding tokenization)及代码示例

词元化是针对自然语言处理任务的数据预处理中一个重要步骤&#xff0c;目的是将原始文本切分成模型可以识别和处理的词元序列。在大模型训练任务中&#xff0c;就是作为大模型的输入。传统的自然语言处理方法&#xff0c;如基于条件随机场的序列标注&#xff0c;主要采用基于词…...

低功耗4G模组LCD应用示例超全教程!不会的小伙伴看这篇就够了!

希望大家通过本文的介绍&#xff0c;学会LCD显示屏与Air780E开发板结合使用的方法。利用LCD显示屏&#xff0c;你可以为你的项目增加丰富的显示内容&#xff0c;提升用户体验。记住&#xff0c;实践出真知&#xff0c;赶快动手尝试吧&#xff01;相信这篇教程对你有所帮助~ 本文…...

Java while语句练习 C语言的函数递归

1. /* public static void main(String[] args) {int[] arr {25, 24, 12, 98, 36, 45};int max arr[0];//不能写0for (int i 1; i < arr.length; i) {if (arr[i] > max) {max arr[i];}}System.out.println(max);}*//*public static void main(String[] args) {doubl…...

illustrator免费插件 截图识别文字插件 textOCR

随手可得的截图识别文字插件 textOCR&#xff0c;识别出来的文字可直接输入到illustrator的当前文档中&#xff1a; 执行条件 1、需截图软件支持&#xff0c;推荐笔记截图工具 2、截好图片直接拖入面板即可完成识别 ****后期可完成实现在illustrator选择图片对象完成文字识别。…...

提升数据管理效率:ETLCloud与达梦数据库的完美集成

达梦数据库的核心优势在于其强大的数据处理能力和高可用性设计。它采用先进的并行处理技术&#xff0c;支持大规模的数据操作&#xff0c;同时具备出色的事务处理能力和数据安全保障。此外&#xff0c;达梦数据库还提供了丰富的功能模块&#xff0c;如数据备份、恢复、监控等&a…...

头歌——人工智能(搜索策略)

文章目录 第1关&#xff1a;搜索策略第2关&#xff1a;盲目搜索第3关&#xff1a;启发式搜索 - 扫地机器人最短路径搜索第4关&#xff1a;搜索算法应用 - 四皇后问题 第1关&#xff1a;搜索策略 什么是搜索技术 人类的思维过程可以看作是一个搜索过程。从小学到现在&#xff0…...

gorm.io/sharding改造:赋能单表,灵活支持多分表策略(下)

背景 分表组件改造的背景&#xff0c;我在这篇文章《gorm.io/sharding改造&#xff1a;赋能单表&#xff0c;灵活支持多分表策略&#xff08;上&#xff09;》中已经做了详细的介绍——这个组件不支持单表多个分表策略&#xff0c;为了突破这个限制做的改造。 在上一篇文章中&…...

域渗透AD渗透攻击利用 MS14-068漏洞利用过程 以及域渗透中票据是什么 如何利用

目录 wmi协议远程执行 ptt票据传递使用 命令传递方式 明文口令传递 hash口令传递 票据分类 kerberos认证的简述流程 PTT攻击的过程 MS14-068 漏洞 执行过程 wmi协议远程执行 wmi服务是比smb服务高级一些的&#xff0c;在日志中是找不到痕迹的&#xff0c;但是这个主…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战:导出框架元素数据到Excel 在结构工程师的日常工作中,经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时,还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么? 一键点击,就能将ETABS中所有框架元素的基…...

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...