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);}}});},

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

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

相关文章

先进API生产力工具eqable HTTP,一站式开发调试工具推荐

简介 Reqable是什么? Regable Fiddler/Charles Postman Reqable是HTTP一站式开发调试国产化解决方案&#xff0c;拥有更便捷的体验&#xff0c;更先进的协议&#xff0c;更高效的性能和更精致的界面。 Reqable是一款跨平台的专业HTTP开发和调试工具&#xff0c;在全平台支持…

APSIM模型应用与参数优化、批量模拟

APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生长模拟模型之一。APSIM模型有Classic和Next Generation两个系列模型&#xff0c;能模拟几十种农作物、牧草和树木的土壤-植物-大气过程&#xff0c;被广泛应用于精细农业、水肥管理、气候变化、粮食安…

ElasticSearch总结

ES是什么 ES是一个天生支持分布式的搜索、聚合分析的存储引擎 基于Java开发 基于Lucene的开源分布式搜索引擎 ELK &#xff1a; elasticSearch Logstah Kibana 加入 Beats 后 ELK 改为 &#xff1a;Elastic stack ES解决了什么问题 ES解决的核心问题 &#xff1a; 1.海量数…

Vue2向Vue3过度核心技术工程化开发和脚手架

目录 1 工程化开发和脚手架1.1 开发Vue的两种方式1.2.脚手架Vue CLI 2 项目目录介绍和运行流程2.1 项目目录介绍2.2 运行流程 3 组件化开发4 根组件 App.vue4.1 根组件介绍4.2 组件是由三部分构成4.3 总结 5 普通组件的注册使用-局部注册5.1 特点&#xff1a;5.2 步骤&#xff…

爬虫异常处理之如何处理连接丢失和数据存储异常

在爬虫开发过程中&#xff0c;我们可能会遇到各种异常情况&#xff0c;如连接丢失、数据存储异常等。本文将介绍如何处理这些异常&#xff0c;并提供具体的解决代码。我们将以Python语言为例&#xff0c;使用requests库进行网络请求和sqlite3库进行数据存储。 1. 处理连接丢失 …

GD32-舵机的原理

GD32-舵机的原理 舵机的现一脉宽与舵机转动角度 旋转编码器的原理 顺时针&#xff1a;A的下降沿时&#xff0c;B处于高电平&#xff1b; 逆时针&#xff1a;A的下降沿时&#xff0c;B处于低电平&#xff1b; #ifndef _ENCODER_DRIVE_H #define _ENCODER_DRIVE_H#include &quo…

开源软件的崛起:历史与未来

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

5.Redis-string

string 字符串 字符串类型是 Redis 最基础的数据类型&#xff0c;关于字符串需要特别注意&#xff1a; 1.⾸先Redis中所有 key 的类型都是字符串类型&#xff0c;⽽且其他⼏种数据结构也都是在字符串类似基础上构建的&#xff0c;例如 list 和 set 的元素类型是字符串类型。 2…

每日一题 823. 带因子的二叉树

每日一题 823. 带因子的二叉树 难度&#xff1a;中等 思路&#xff1a; 取乘积&#xff0c;那么两个叶子节点相乘一定会得到一个更大的数&#xff0c;所以先排序以父节点为根节点的数的数量 以右节点为根节点的数的数量 * 以左节点为根节点的数的数量初始化列表&#xff0c;…

花5分钟判断,你的Jmeter技能是大佬还是小白!

jmeter 这个工具既可以做接口的功能测试&#xff0c;也可以做自动化测试&#xff0c;还可以做性能测试&#xff0c;其主要用途就是用于性能测试。但是&#xff0c;有些公司和个人&#xff0c;就想用 jmeter 来做接口自动化测试。 你有没有想过呢&#xff1f; 下面我就给大家讲…

多线程(二)

一.关于线程的常用操作 1.启动线程 run(): 对于run方法的覆写只是指定线程要做的任务清单&#xff0c;而不是真正的启动线程 start()&#xff1a; start()方法才是真正的在底层创建出一个线程&#xff0c;并且启动 2.中断线程 1.通过共享的标记来中断 package demo; impor…

unity-AI自动导航

unity-AI自动导航 给人物导航 一.地形创建 1.首先我们在Hierarchy面板中创建一个地形对象terrian&#xff0c;自行设定地形外貌&#xff0c;此时我们设置一个如下的地形外观。 二.创建导航系统 1.在主人公的Inspector、面板中添加Nav Mesh Agent &#xff08;导航网格代理&…

python中的matplotlib画直方图(数据分析与可视化)

python中的matplotlib画直方图&#xff08;数据分析与可视化&#xff09; import numpy as np import pandas as pd import matplotlib.pyplot as pltpd.set_option("max_columns",None) plt.rcParams[font.sans-serif][SimHei] plt.rcParams[axes.unicode_minus]Fa…

【Linux】进程通信 — 信号(下篇)

文章目录 &#x1f4d6; 前言1. 阻塞信号1.1 信号其他相关常见概念&#xff1a;1.2 sigset_t&#xff1a;1.2 - 1 信号集操作函数 1.3 sigprocmask&#xff1a;1.4 sigpending&#xff1a; 2. 进程处理信号2.1 内核页表和用户页表&#xff1a;2.2 内核态和用户态&#xff1a;2.…

「Vue|网页开发|前端开发」02 从单页面到多页面网站:使用路由实现网站多个页面的展示和跳转

本文主要介绍如何使用路由控制来实现将一个单页面网站扩展成多页面网站&#xff0c;包括页面扩展的逻辑&#xff0c;vue的官方路由vue-router的基本用法以及扩展用法 文章目录 本系列前文传送门一、场景说明二、基本的页面扩展页面扩展是在扩什么创建新页面的代码&#xff0c;…

面试题-React(七):React组件通信

在React开发中&#xff0c;组件通信是一个核心概念&#xff0c;它使得不同组件能够协同工作&#xff0c;实现更复杂的交互和数据传递。常见的组件通信方式&#xff1a;父传子和子传父 一、父传子通信方式 父组件向子组件传递数据是React中最常见的一种通信方式。这种方式适用…

SpringBoot异步方法支持注解@Async应用

SpringBoot异步方法支持注解Async应用 1.为什么需要异步方法&#xff1f; 合理使用异步方法可以有效的提高执行效率 同步执行(同在一个线程中): 异步执行(开启额外线程来执行): 2.SpringBoot中的异步方法支持 在SpringBoot中并不需要我们自己去创建维护线程或者线程池来…

C#_进程单例模式.秒懂Mutex

什么是Mutex? 可以定义调用线程是否具有互斥性&#xff0c;程序创建者拥有控制权&#xff0c;相反只能引用程序。 参数1&#xff1a;如果是程序创建者&#xff0c;就获得控制权。 参数2&#xff1a;名称&#xff0c;可使用GUID生成。 参数3&#xff1a;out 返回值&#xf…

Linux下套接字TCP实现网络通信

Linux下套接字TCP实现网络通信 文章目录 Linux下套接字TCP实现网络通信1.引言2.具体实现2.1接口介绍1.socket()2.bind()3.listen()4.accept()5.connect() 2.2 服务器端server.hpp2.3服务端server.cc2.4客户端client.cc 1.引言 ​ 套接字(Socket)是计算机网络中实现网络通信的一…

1688API技术解析,实现获得1688商品详情

要实现获得1688商品详情&#xff0c;你需要使用1688 API。1688 API是阿里巴巴旗下的开放平台&#xff0c;它提供了一套丰富的接口&#xff0c;可以让开发者通过编程的方式获取到1688网站上的商品信息。 首先&#xff0c;你需要在阿里开放平台注册一个账号&#xff0c;并创建一…