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

Element——table排序,上移下移功能。及按钮上一条下一条功能

需求:table排序,可操作排序上移下移功能。判断第一行上移禁用和最后一行下移禁用,排序根据后端返回的字段

在这里插入图片描述

 <el-table:data="tableData"style="width: 100%"><el-table-column type="index" label="序号" align="center" min-width="50"><template slot-scope="scope"><span>{{ scope.$index + (pageNum - 1) * pageSize + 1 }}</span></template></el-table-column><el-table-columnprop="name"label="编号"width="180"></el-table-column><el-table-columnprop="address"label="排序"><template slot-scope="scope"><el-buttontype="text"disabled={index === 0}@click={e => this.sortFunction(e, row, "1")}>上移</el-button><el-buttontype="text"disabled={index === this.tableData.length - 1}@click={e => this.sortFunction(e, row, "2")}>下移</el-button></el-table-column></el-table-column><el-table-column prop="address" label="操作" min-width="200" align="center"><template slot-scope="scope"><el-button>编辑</el-button><el-button  @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table>
sortFunction(e, row, type) {changeSort({//排序接口sortType: type,templateConfigId: row.templateConfigId}).then(res => {if (res.code === 200) {this.getList();//获取表格接口}});},

按钮上一条下一条功能

            <div class="right-bottom"><el-buttonclass="end-upon btns":disabled="uponindex === 0":class="isEndBtn === true ? 'isActive' : ''"@click="endUponClick()">上一条</el-button><el-buttonclass="end-next btns":disabled="isDisabled":class="isNextBtn === true ? 'isActive' : ''"@click="endNextClick()">下一条</el-button></div>
//上一条按钮endUponClick() {//存老的值 oldNamelet oldName = this.activeName;//this.activeName 当前选中的那一条数据let addNum = this.activeName - 1;this.tabsList.forEach((item, index) => {if (addNum === 0) {this.isEndBtn = true;this.isBtnDisabled = true;this.isNextBtn = false;this.$message({message: '此项为第一条数据',type: 'warning'});}if (addNum === item.sort) {this.activeName = addNum;if (item.testStatus === '2') {this.onSetShow = true;} else {this.onSetShow = false;}//当前选中的那一条this.tabsList.forEach(v => {if (oldName === v.sort) {this.contentCode = v.contentCode;this.debugContent = v.debugContent;this.testStatus = v.testStatus;this.dataRecordResultList = v.dataRecordResult;}});this.isEndBtn = true;this.isNextBtn = false;this.activeName = addNum;this.updateInfo(this.dataRecordResultList);}});},//下一条按钮endNextClick() {//存老的值 oldNamelet oldName = this.activeName;//this.activeName 当前选中的那一条数据let addNum = this.activeName + 1;let lengthNum = this.tabsList.length + 1;this.tabsList.forEach((item, index) => {if (addNum === lengthNum) {this.isNextBtn = true;this.isEndBtn = false;this.isBtnDisabled = true;this.$message({message: '此项为最后一条数据',type: 'warning'});} else {if (addNum === item.sort) {this.activeName = addNum;if (item.testStatus === '2') {this.onSetShow = true;} else {this.onSetShow = false;}//当前选中的那一条this.tabsList.forEach(v => {if (oldName === v.sort) {this.contentCode = v.contentCode;this.debugContent = v.debugContent;this.testStatus = v.testStatus;this.dataRecordResultList = v.dataRecordResult;}});this.isNextBtn = true;this.isEndBtn = false;this.activeName = addNum;this.updateInfo(this.dataRecordResultList);}}});},

相关文章:

Element——table排序,上移下移功能。及按钮上一条下一条功能

需求&#xff1a;table排序&#xff0c;可操作排序上移下移功能。判断第一行上移禁用和最后一行下移禁用&#xff0c;排序根据后端返回的字段 <el-table:data"tableData"style"width: 100%"><el-table-column type"index" label"序…...

无涯教程-Android - Linear Layout函数

Android LinearLayout是一个视图组&#xff0c;该视图组将垂直或水平的所有子级对齐。 Linear Layout - 属性 以下是LinearLayout特有的重要属性- Sr.NoAttribute & 描述1 android:id 这是唯一标识布局的ID。 2 android:baselineAligned 此值必须是布尔值&#xff0c;为…...

ELK安装、部署、调试(六) logstash的安装和配置

1.介绍 Logstash是具有实时流水线能力的开源的数据收集引擎。Logstash可以动态统一不同来源的数据&#xff0c;并将数据标准化到您选择的目标输出。它提供了大量插件&#xff0c;可帮助我们解析&#xff0c;丰富&#xff0c;转换和缓冲任何类型的数据。 管道&#xff08;Logs…...

【Spring Security】UserDetails 接口介绍

文章目录 UserDetails 的作用UserDetails 接口中各个方法详解 UserDetails 的作用 UserDetails 在 Spring Security 框架中主要担任获取用户信息的接口&#xff0c;通过该接口就能拿到用户的信息和验证用户的信息&#xff0c;这些信息在下面的方法中会有讲述。 UserDetails 接…...

C# Linq源码分析之Take(四)

概要 本文主要对Take的优化方法进行源码分析&#xff0c;分析Take在配合Select&#xff0c;Where等常用的Linq扩展方法使用时候&#xff0c;如何实现优化处理。 本文涉及到Select, Where和Take和三个方法的源码分析&#xff0c;其中Select, Where, Take更详尽的源码分析&…...

Python 和 C++ 使用细节差别

1. 循环中的可迭代对象长度 1. 循环中的可迭代对象长度 C 中&#xff0c;for循环中写明a.size()&#xff0c;每次循环这个值是重新计算的&#xff1b; # include “iostream” # include <vector> using namespace std;int main() {vector<int> a(10);int cnt 0…...

在Ubuntu Linux系统上安装RabbitMQ服务并解决公网远程访问问题

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…...

葫芦娃自动预约-公众号代挂

效果 #小程序://航旅黔购/1nkYlNRVzm0Gg9x #小程序://贵旅优品/7zz6mtnSVgDfyqa #小程序://新联惠购/ibFdsuhWqIbczEd #小程序://贵盐黔品/u2TgExCUdkavrFe #小程序://空港乐购/ANkOOdqEeo71kah #小程序://遵航出山/ZkR7DQy1raoPxKD #小程序://乐旅商城/Ip5cgpJ7TLmRrWF #小程序…...

ESP32应用教程(0)— PMW3901MB光流传感器

文章目录 前言 1 传感器介绍 1.1 关键特征 1.2 关键参数 2 硬件概述 2.1 信号引脚 2.2 参考电路图 3 寄存器 3.1 寄存器列表 3.2 性能优化寄存器 4 代码说明 4.1 结构体说明 4.2 编译说明 5 波形分析 前言 本文介绍了在 ESP32 DEVKIT V1 开发板上开发 PMW3901MB…...

docker部署nginx,部署springboot项目,并实现访问

一、先部署springboot项目 1、安装docker&#xff1a; yum install docker -y 2、启动docker&#xff1a; service docker start 重启&#xff1a; service docker restart 3、查看版本&#xff1a; docker -v 4、使设置docker.service生效&#xff08;路径&#xff1a;…...

十五、模板方法模式

一、什么是模板方法模式 模板方法&#xff08;Template Method&#xff09;模式的定义如下&#xff1a;定义一个操作中的算法骨架&#xff0c;而将算法的一些步骤延迟到子类中&#xff0c;使得子类可以不改变该算法结构的情况下重定义该算法的某些特定步骤。 模板方法模式包含以…...

jvm 什么是常量池,常量池定义 class常量池

首先需要理解下Java的class文件&#xff0c;以及class文件结构&#xff1a; 1.Class文件是一组以8个字节为基础单位的二进制流&#xff0c;各个数据项目严格按照顺序紧凑地排列在文 件之中&#xff0c;中间没有任何分隔符&#xff0c;这使得整个Class文件中存储的内容几乎全部…...

CA证书颁发机构服务器

目录 一、CA证书颁发机构是什么&#xff1f; 二、数字证书可以干什么&#xff1f; 三、PKI&#xff1a;即公钥加密体系&#xff08;public key cryptography&#xff09; 四、CA在网络中的工作流程及原理&#xff08;以网站为例&#xff09; 五、HTTPS 的工作原理 六、CA私有证…...

5. 线性层及其他层

5.1 神经网络结构 5.2 线性拉平 import torch import torchvision from torch import nn from torch.nn import ReLU from torch.nn import Sigmoid from torch.utils.data import DataLoader from torch.utils.tensorboard import SummaryWriterdataset torchvision.datase…...

PhpStorm安装篇

PhpStorm安装篇: 下载地址 : 进入官网下PhpStorm: PHP IDE and Code Editor from JetBrains 下载完之后&#xff0c;安装包 安装目录建议不要放C盘&#xff0c;放其他盘&#xff0c;其他直接一直点 next &#xff0c;到结束 安装完&#xff0c;打开编辑器 注册账号并登录后…...

麒麟Linux常见问题

文章目录 麒麟Linux常见问题 1. yum下载不了文件1&#xff09;报错信息2&#xff09;原因3&#xff09;解决&#xff08;1&#xff09;更换下载源&#xff08;2&#xff09;缓存处理 4&#xff09;验证 2. 麒麟Linux常见问题 1. yum下载不了文件 1&#xff09;报错信息 faile…...

一百六十八、Kettle——用海豚调度器定时调度从Kafka到HDFS的任务脚本(持续更新追踪、持续完善)

一、目的 在实际项目中&#xff0c;从Kafka到HDFS的数据是每天自动生成一个文件&#xff0c;按日期区分。而且Kafka在不断生产数据&#xff0c;因此看看kettle是不是需要时刻运行&#xff1f;能不能按照每日自动生成数据文件&#xff1f; 为了测试实际项目中的海豚定时调度从…...

Linux centos7 bash编程(小练习)

一、打印九九乘法口诀 这一个for循环嵌套的小练习&#xff0c;难度不大。提供一种写法&#xff0c;供参考&#xff1a; #!/bin/bash # 文件名&#xff1a;99table.sh # 打印输出九九乘法口诀表 for i in {1..9} do for ((j1;j<$i;j)) do …...

【SpringBoot】Web server failed to start. Port 8080 was already in use.

问题描述 SpringBoot启动Web服务器失败。 *************************** APPLICATION FAILED TO START ***************************Description:Web server failed to start. Port 8080 was already in use.Action:Identify and stop the process thats listening on port 80…...

day-36 代码随想录算法训练营(19)part05

435.无重叠区间 思路&#xff1a;首先对数组排序&#xff0c;只需要关注重叠区间就行&#xff0c;有重叠时计数1&#xff0c;然后更新当前右边界为重叠区间中的最小右边界。 763.划分字母区间 思路&#xff1a;记录每一个字母的最远位置&#xff0c;然后从头开始遍历&#xf…...

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学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...