列表排序按钮常用方法,实现“向前移动到第一个↑”、“向前移动∧”、“向后移动∨”、“向后移动到最后一个↓”

news2024/9/19 10:43:36

<el-button
title="向前移动到第一个"
size="mini"
type="primary"
icon="el-icon-top"
:disabled="tableData.length scope.row.value === tableData[0].value :true"
@click.stop="moveToFirst(scope.row)"
circle
plain/>

<el-button
title="向前移动"
size="mini"
type="primary"
icon="el-icon-arrow-up"
:disabled="tableData.length scope.row.value === tableData[0].value :true"
@click.stop="moveToPrev(scope.row)"
circle
plain/>

<el-button
title="向后移动"
size="mini"
type="primary"
icon="el-icon-arrow-down"
:disabled="tableData.length scope.row.value === tableData.slice(-1)[0].value :true"
@click.stop="moveToNext(scope.row)"
circle
plain/>


<el-button
title="向后移动到最后一个"
size="mini"
type="primary"
icon="el-icon-bottom"
:disabled="tableData.length scope.row.value === tableData.slice(-1)[0].value :true"
@click.stop="moveToLast(scope.row)"
circle
plain/>

方法

getIndex(d) {
    return this.tableData.findIndex(v => v.value == d.value);
},
moveToFirst(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(0, 0, this.tableData.splice(idx, 1)[0]);
},
moveToPrev(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(idx - 1, 0, this.tableData.splice(idx, 1)[0]);
},
moveToNext(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(idx + 1 > this.tableData.length - 1 ? 0 : idx + 1, 0, this.tableData.splice(idx, 1)[0]);
},
moveToLast(d) {
    let idx = this.getIndex(d);
    this.tableData.splice(this.tableData.length - 1, 0, this.tableData.splice(idx, 1)[0]);
},

扩展阅读类比置顶排序排序置顶、非置顶算法,实现置顶后的结果和非置顶的内容排序保持原始序列_你挚爱的强哥的博客-CSDN博客【代码】排序置顶、非置顶算法,实现置顶后的结果和非置顶的内容排序保持原始序列。https://blog.csdn.net/qq_37860634/article/details/131977941

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

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

相关文章

螺环化合物:1380300-88-8,具有刚性结构,结构稳定

资料编辑|陕西新研博美生物科技有限公司小编MISSwu​ PART1----产品描述&#xff1a; 螺环化合物&#xff08;CAS号&#xff1a;1380300-88-8&#xff09;&#xff0c;螺环化合物具有刚性结构&#xff0c;结构稳定&#xff0c;其手性配体有较大的比旋光度&#xff0c;在不对称…

如何选择低代码/零代码平台(最全平台总结)

来谈论这个问题之前&#xff0c;我们先来看看到底什么是低代码/零代码—— 低代码 对于“低代码”的宣传其实已经很久很广泛了&#xff0c;但是争议从来都没有停止。 忘记之前在哪里看到过一个“低代码将会取代程序员”之类的说法&#xff0c;觉得很好笑&#xff0c;看了一些…

靶机精讲之Brainpan1

nmap扫描 主机发现 端口扫描 服务扫描 -sT 说明用tcp协议&#xff08;三次握手&#xff09;扫描 -sV扫描版本 O扫描系统 NULL是图片 10000端口是个python服务 UDP扫描 脚本扫描 web渗透 目录爆破 显示/bin/目录有东西 gobuster dir -w /usr/share/dirbuster/wordlists/di…

KVC与KVO

KVO 什么是KVO KVO全称Key Value Observing&#xff0c;其是苹果提供的一套事件通知机制。允许对象监听另一个对象特定属性的改变&#xff0c;并在改变时接收到事件。观察者模式 由于KVO的实现机制&#xff0c;只针对属性才会发生作用&#xff0c;一般继承自NSObject的对象都…

Centos部署Springboot项目详解

准备启动jar包&#xff0c;app.jar放入指定目录。 一、命令启动 1、启动命令 java -jar app.jar 2、后台运行 nohup java -jar app.jar >/dev/null 2>&1 & 加入配置参数命令 nohup java -Xms512M -Xmx512M -jar app.jar --server.port9080 spring.profiles…

k8s webhook实例,java springboot程序实现 对Pod创建请求添加边车容器 ,模拟istio实现日志文件清理

k8s webhook实例&#xff0c;java springboot程序实现 对Pod创建请求添加边车容器 &#xff0c;模拟istio实现日志文件清理 大纲 背景与原理实现流程开发部署my-docker-demo-sp-user服务模拟业务项目开发部署my-sidecar服务模拟边车程序开发部署服务my-docker-demo-k8s-opera…

代码随想录算法训练营day14 | 二叉树的递归遍历和迭代遍历

目录 144. 二叉树的前序遍历 94. 二叉树的中序遍历 145. 二叉树的后序遍历 递归看这篇文章&#xff1a;三道题套路解决递归问题 | lyls blog 前序遍历的和后序遍历的迭代方法代码思路相同&#xff1b;因为栈为先进后出&#xff0c;所以前序遍历的入栈顺序为中右左&#xff1…

查看GPU使用的最佳方式

1. watch -n 1 nvidia-smi (最有名,没有之一) nvidia自带了一个nvidia-smi的命令行工具,会显示GPU使用情况 ​​​​​​​ 作为监控 GPU 的工具就显得有点过于简陋了。比如 Process name 栏只显示命令行的程序名,不显示参数,这样输出结果就是一堆 python 和 .../Minico…

封神,谷歌架构师分享 出gRPC 与云原生应用开发 Go 和 Java 为例文档

前言 随着微服务和云原生相关技术的发展&#xff0c;应用程序的架构模式已从传统的单体架构或分层架构转向了分布式的计算架构。尽管分布式架构本身有一定的开发成本和运维成本&#xff0c;但它所带来的收益是显而易见的。 在实现分布式应用程序时&#xff0c;我们必须考虑两…

加热炉优化燃烧控制系统开发

首先给大家推荐本书&#xff1a;      认识 加热炉是是把坯料加热到均匀的、适合轧制的温度(奥氏体组织)。温度提高以后&#xff0c;首先是提高钢的塑性&#xff0c;降低变形抗力&#xff0c;使钢容易变形。 钢坯加热模型。如T12钢室温下变形抗力约为600Mpa&#xff0c;加热…

ide运行报错“Command line is too long”解决办法

有时运行程序时&#xff0c;ide会报如下错&#xff0c;如何解决呢&#xff0c;其实提示已经告诉你解决办法了。点击图中的蓝色超链接&#xff1a; “JAR MAINIFEST” 或 “CLASSPATH FILE” 都能解决问题 这是因为命名的方法名太长了才会报这个错 方法2 如果没有弹窗&#xf…

DisplayPort Alt Mode On Type-c协议_Ver2.0(学习笔记)

1.简介 USB-C设想支持使用Type-C连接器和电缆的Alt Mode&#xff0c;其中各种Type-C连接器引脚可以重新配置&#xff0c;以支持超出Type-C范围的接口。 Type-C&#xff08;以及它所利用的USB PD&#xff09;提供了一个Discovery Process&#xff0c;用于发现连接的USB设备中对…

【Yolo系列目标检测模型】详细整理!更新中

文章目录 1、YOLOv11.1、概述1.2、实现方案1&#xff09;整体思路2&#xff09;网络结构3&#xff09;损失函数4&#xff09;推理/预测过程5&#xff09;优缺点 2、YOLOv22.1、概述/改进整体思路2.2、YOLOv2的改进点/tricks1&#xff09;Multi-Scale Training2&#xff09;High…

智安网络|常见的网络安全陷阱:你是否掉入了其中?

在数字化时代&#xff0c;网络安全成为了一个重要的议题。随着我们越来越多地在互联网上进行各种活动&#xff0c;诸如在线银行交易、社交媒体分享和在线购物等&#xff0c;我们的个人信息也更容易受到攻击和滥用。虽然有许多关于网络安全的指导和建议&#xff0c;但仍然有许多…

代码扫描平台SonarQube搭建保姆级教程

代码扫描工具SonarQube&#xff0c;想必大家也有了解&#xff0c;就是那种不明觉厉的存在&#xff0c;最近刚好有需求&#xff0c;需要自己搭建&#xff0c;下面就给大家记录下搭建的过程。 不了解的&#xff0c;可以先看看 https://github.com/SonarSource/sonarqube 有一个初…

【浩鲸科技】济南Java后端面经

本文目录 写在前面试题总览题目解析1.说一下SpringBoot中常用的注解2.Redis中的基本数据类型3.TCP的网络协议4.java中常见的锁5.Hashmap的底层数据结构、底层源码、扩容机制源码6.java面向对象的特点 写在前面 关于这个专栏&#xff1a; 本专栏记录一些互联网大厂、小厂的面试实…

短视频矩阵系统源码开发流程​

一、视频矩阵系统源码开发流程分为以下几个步骤&#xff1a; 四、技术开发说明&#xff1a; 产品原型PRD需求文档产品交互流程图部署方式说明完整源代码源码编译方式说明三方框架和SDK使用情况说明和代码位置平台操作文档程序架构文档 一、抖音SEO矩阵系统源码开发流程分为以…

什么是 MyBatis?

经过前几篇博客的学习 Spring 系列的基本操作已经实现的差不多了&#xff0c;接下来&#xff0c;我们来学习更重要的知识&#xff0c;将前端传递的数据存储起来&#xff0c;或者查询数据库里面的数据。 一、MyBatis 是什么&#xff1f; MyBatis 是一款优秀的持久层框架&…

Vue中$route和$router的区别

$router&#xff1a;用来操作路由&#xff0c;$route&#xff1a;用来获取路由信息 $router其实就是VueRouer的实例&#xff0c;对象包括了vue-router使用的实例方法&#xff0c;还有实例属性&#xff0c;我们可以理解为$router有一个设置的含义&#xff0c;比如设置当前的跳转…

二叉树的基本操作函数(先、中、后、层次遍历)

//链式二叉树数据结构 typedef struct Node { TElemType data;//数据域 struct Node* lchild, * rchild;//左右孩子 }Node, * Tree; #include <queue> #define TElemType int //方便 应用的时候 改//链式二叉树数据结构 typedef struct Node {TElemType data;//数据域s…