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.hqwc.cn/news/87690.html

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

相关文章

WPF基础入门-Class4-WPF绑定

WPF基础入门 Class4&#xff1a;WPF绑定 一、简单绑定数据 1、cs文件中设置需要绑定的数据&#xff1a; public partial class Class_4 : Window{public Class_4(){InitializeComponent();List<Color> test new List<Color>();test.Add(new Color() { Code &q…

【校招VIP】产品思维设计之用户需求分析

考点介绍&#xff1a; 理解用户需求时需要我们在看待产品的时候不能以我们创造者的专业身份来看&#xff0c;而需要用同理心&#xff0c;将自己转变为一个产品的典型用户&#xff0c;才能准确挖掘到用户心底最真实的诉求。 『产品思维设计之用户需求分析』相关题目及解析内容可…

Dataset的简单使用

Pytorch 给我们提供了一个方法&#xff0c;方便我们加载数据&#xff0c;我们可以使用这个框架&#xff0c;去加载我们的数据。看下伪代码&#xff1a; # # # Input pipeline for custom dataset # # ## You should build your custom datas…

CUDA小白 - NPP(2) -图像处理-算数和逻辑操作

cuda小白 原文链接 NPP GPU架构近些年也有不少的变化&#xff0c;具体的可以参考别的博主的介绍&#xff0c;都比较详细。还有一些cuda中的专有名词的含义&#xff0c;可以参考《详解CUDA的Context、Stream、Warp、SM、SP、Kernel、Block、Grid》 常见的NppStatus&#xff0c…

传承精神 缅怀伟人——湖南多链优品科技有限公司赴韶山开展红色主题活动

8月27日上午&#xff0c; 湖南多链优品科技有限公司全体员工怀着崇敬之情&#xff0c;以红色文化为引领&#xff0c;参加了毛泽东同志诞辰130周年的纪念活动。以董事长程小明为核心的公司班子成员以及全国优秀代表近70人一行专赴韶山&#xff0c;缅怀伟人毛泽东同志的丰功伟绩。…

Hbase文档--架构体系

阿丹&#xff1a; 基础概念了解之后了解目标知识的架构体系&#xff0c;就能事半功倍。 架构体系 关键组件介绍&#xff1a; HBase – Hadoop Database&#xff0c;是一个高可靠性、高性能、面向列、可伸缩的分布式存储系统&#xff0c;利用HBase技术可在廉价PC Server上搭建起…

TensorBoard的使用

TensorBoard&#xff1a;对图像进行变换 1. SummaryWriter的使用 ctrl类出现注释解析&#xff1a; 将条目直接log_dir写入要成为由TensorBoard使用。 “摘要编写器”类提供了一个高级 API 来创建事件文件&#xff0c;并在给定目录中添加摘要和事件。该类更新文件内容异步。…

ceph peering机制-状态机

本章介绍ceph中比较复杂的模块&#xff1a; Peering机制。该过程保障PG内各个副本之间数据的一致性&#xff0c;并实现PG的各种状态的维护和转换。本章首先介绍boost库的statechart状态机基本知识&#xff0c;Ceph使用它来管理PG的状态转换。其次介绍PG的创建过程以及相应的状…

Java学数据结构(4)——散列表Hash table 散列函数 哈希冲突

目录 引出散列表Hash table关键字Key和散列函数(hash function)散列函数解决collision哈希冲突&#xff08;碰撞&#xff09;分离链接法(separate chaining)探测散列表(probing hash table)双散列(double hashing) Java标准库中的散列表总结 引出 1.散列表&#xff0c;key&…

day2 牛客TOP100:BM 11-20 链表 二分法 流输入 小美加法

文章目录 链表BM11 链表相加(二)BM12 单链表的排序归并排序分割 超时辅助数组快排 BM13 判断一个链表是否为回文结构BM14 链表的奇偶重排BM15 删除有序链表中重复的元素-IBM16 删除有序链表中重复的元素-IIJZ35 复杂链表的复制 二分法BM17 二分查找-IBM18 二维数组中的查找BM19…

Git中smart Checkout与force checkout

Git中smart Checkout与force checkout 使用git进行代码版本管理,当我们切换分支有时会遇到这样的问题&#xff1a; 这是因为在当前分支修改了代码&#xff0c;但是没有commit,所以在切换到其他分支的时候会弹出这个窗口&#xff0c; 提示你选force checkout或者smart checko…

Windows11 安装 nvm node版本管理工具

在 Windows 11 上安装并配置 NVM 与 Node.js 版本管理工具 引言&#xff1a; Node.js 是一款强大的开发工具&#xff0c;而版本管理工具 NVM 则可以帮助我们在不同的项目中灵活地切换和管理 Node.js 版本。本篇博客将为大家介绍如何在 Windows 11 操作系统上安装 NVM&#xff…