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

news2024/10/6 22:24:17

需求: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-column
        prop="name"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="排序">
         <template slot-scope="scope">
			<el-button
                  type="text"
                  disabled={index === 0}
                  @click={e => this.sortFunction(e, row, "1")}
                >
                  上移
                </el-button>
                <el-button
                  type="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-button
                class="end-upon btns"
                :disabled="uponindex === 0"
                :class="isEndBtn === true ? 'isActive' : ''"
                @click="endUponClick()"
                >上一条</el-button
              >
              <el-button
                class="end-next btns"
                :disabled="isDisabled"
                :class="isNextBtn === true ? 'isActive' : ''"
                @click="endNextClick()"
                >下一条</el-button
              >
            </div>
//上一条按钮
    endUponClick() {
      //存老的值 oldName
      let 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() {
      //存老的值 oldName
      let 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.coloradmin.cn/o/941920.html

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

相关文章

Docker容器中的Postgresql备份脚本异常解决办法

本文基于K8S中Docker容器对postgres数据库进行备份的操作&#xff0c;编写好脚本后&#xff0c;手动执行脚本是正常的&#xff0c;但是crontab定时实行却报错&#xff0c;报错信息为kubectl command not found&#xff0c;提示没有找到kubectl指令。 本文主要介绍对该报错信息…

Mybatis 复杂结果映射(ResultMap) - 一对多关系映射

上一篇内容我们介绍了Mybatis结果映射&#xff0c;使用结果映射可以在数据库表中字段与类中字段不一致时解决数据映射的问题&#xff0c;本篇我们在上一篇的基础上深入了解结果映射&#xff0c;使用复杂的结果映射解决一对多关系中复杂的数据映射问题。 如果您对结果映射不太了…

长胜证券:看好未来市场情绪和景气度持续修复下的券商板块机遇

摘要 【长胜证券&#xff1a;看好未来商场心情和景气量继续修正下的券商板块机会】买卖佣钱的下调直接下降出资者买卖成本&#xff0c;有望激活商场、提振交投活泼度。一起&#xff0c;当时方针处于良性周期&#xff0c;估计活泼资本商场相关办法有望逐步落地&#xff0c;为券…

专业制造一体化ERP系统,专注于制造工厂生产管理信息化,可定制-亿发

制造业是国民经济的支柱产业&#xff0c;对于经济发展和竞争力至关重要。在数字化和智能化趋势的推动下&#xff0c;制造业正处于升级的关键时期。而ERP系统&#xff0c;即企业资源计划系统&#xff0c;能够将企业的各个业务环节整合起来&#xff0c;实现资源的有效管理和信息的…

No124.精选前端面试题,享受每天的挑战和学习

文章目录 vue中如何获取节点元素&#xff0c;如何获取单个节点&#xff0c;如何获取多个节点vue中的v-for和v-if哪个优先级高&#xff0c;vue2和vue3分开介绍&#xff0c;并说明会产生什么后果介绍一下ts比js的优势&#xff0c;以及在哪些场景用过ts的一些数据类型有什么区别&a…

c#在MVC Api(.net framework)当中使用Swagger,以及Demo下载

主要的步骤就是创建项目&#xff0c;通过nuget 添加Swashbuckle包&#xff0c;然后在SwaggerConfig当中进行相关的配置。 具体的步骤&#xff0c;可以参考下面的链接&#xff1a; https://www.cnblogs.com/94pm/p/8046580.htmlhttps://blog.csdn.net/xiaouncle/article/detail…

代码随想录算法训练营第五十一天|LeetCode503,42

目录 LeetCode 503.下一个更大元素II LeetCode 42.接雨水 LeetCode 503.下一个更大元素II 文章讲解&#xff1a;代码随想录 力扣题目&#xff1a;LeetCode 503.下一个更大元素II 代码如下&#xff08;Java&#xff09;: class Solution {public int[] nextGreaterElements(i…

JZ41数据流在的中位数

题目地址&#x1f4d0;&#xff1a;数据流中的中位数_牛客题霸_牛客网 题目回顾&#x1f4e7;&#xff1a; 解题思路&#x1f4d6;&#xff1a; 首先对于中位数&#xff0c;我们都知道&#xff0c;排序后如果是数组长度是奇数&#xff0c;中位数就是中间的值&#xff0c;也就是…

Camera摄像头PCB布局布线设计注意事项

摄像头&#xff08;Camera或Webcam&#xff09;又称为电脑相机、电脑眼、电子眼等&#xff0c;是一种视频输入设备&#xff0c;被广泛的运用于视频会议、远程医疗及实时监控等方面。摄像头可分为数字摄像头和模拟摄像头两大类&#xff1b; 图1 摄像图模组 摄像头PCB设计注意事项…

数字货币量化交易平台

数字货币量化交易平台是近年来金融科技领域迅速崛起的一种创新型交易方式。它通过应用数学模型和算法策略&#xff0c;实现对数字货币市场的自动交易和风险控制。然而&#xff0c;要在这个竞争激烈的领域中脱颖而出&#xff0c;一个数字货币量化交易平台需要具备足够的专业性&a…

大数据Flink实时计算技术

1、架构 2、应用场景 Flink 功能强大&#xff0c;支持开发和运行多种不同种类的应用程序。它的主要特性包括&#xff1a;批流一体化、精密的状态管理、事件时间支持以及精确一次的状态一致性保障等。在启用高可用选项的情况下&#xff0c;它不存在单点失效问题。事实证明&#…

气传导耳机对耳朵有损害吗?2023热门气传导耳机推荐

​不会对耳朵有损害。无论是在健身房锻炼还是在旅途中&#xff0c;都很多人佩戴蓝牙耳机&#xff0c;蓝牙耳机类型也越来越多&#xff0c;目前气传导耳机领导了耳机的新时尚&#xff0c;它们最突出的优点就是佩戴方式&#xff0c;开放双耳&#xff0c;而气传导耳机采用空气传导…

Python使用 YOLO_NAS_S 模型进行目标检测并保存预测到的主体图片

一、前言&#xff1a; 使用 YOLO_NAS_S 模型进行目标检测&#xff0c;并保存预测到的主体图片 安装包&#xff1a; pip install super_gradients pip install omegaconf pip install hydra-core pip install boto3 pip install stringcase pip install typing-extensions pi…

nginx服务与调优(一)

一、nginx概述&#xff1a; 1.Nginx简介&#xff1a; Nginx是一个高性能的HTTP和反向代理服务器。是一款轻量级的高性能的web服务器/反向代理服务器/电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#xff0c;单台物理服务器可支持30 000&#xff5e;50 000个并发请求…

混合App开发,还能用计算机之父的那套理论

随着移动互联网的蓬勃发展&#xff0c;传统的原生应用和Web应用逐渐融合&#xff0c;冯诺伊曼结构则为此提供了坚实的理论基础。通过将应用的核心逻辑和数据存储在云端&#xff0c;实现了应用的分离&#xff0c;不仅为开发者带来了更便捷的维护和更新方式&#xff0c;也为用户提…

亚马逊加购软件之添加购物车对亚马逊卖家有什么好处

亚马逊对卖家而言&#xff0c;购物车功能可以带来以下一些好处&#xff1a; 1、提高销售机会&#xff1a;当买家将商品添加到购物车中&#xff0c;这意味着他们对这些商品感兴趣并考虑购买。这为卖家提供了更多的销售机会&#xff0c;因为购物车中的商品可能会最终被购买。 2…

橙河:海外賺美金的项目有哪些?

大家好&#xff0c;我是橙河老师。现在呢&#xff0c;很多人去国外打工&#xff0c;大家在短视频上也经常能看到&#xff0c;他们在国外挣了几年钱&#xff0c;回来就能买车买房。 其实呢&#xff0c;他们在国外的工作&#xff0c;工资也就是几千块一个月&#xff0c;不过他们…

15-模型 - 一对多 多对多

一对多&#xff1a; 1. 在多的表里定义外键 db.ForeignKey(主键) 2. 增加字段 db.relationship 建立联系 ("关联表类名","反向引用名") from ext import db# 一 class User(db.Model):id db.Column(db.Integer, primary_keyTrue, autoincrementTrue)us…

「MySQL-05」MySQL Workbench的下载和使用

目录 一、MySQL workbench的下载和安装 1. MySQL workbench介绍 2. 到MySQL官网下载mysql workbench 3. 安装workbench 二、创建能远程登录的用户并授权 1. 创建用户oj_client 2. 创建oj数据库 3. 给用户授权 4. 在Linux上登录用户oj_client检查其是否能操作oj数据库 三、使用…

CSPM认证是什么?

​CSPM项目管理专业人员能力等级评价是由中国标准化协会&#xff08;全国项目管理标准化技术委员会秘书处&#xff09;和中国国际人才交流基金会联合发起的。 是依据《项目管理专业人员能力评价要求》(GB/T 41831-2022)国家标准&#xff0c;按照项目管理专业人员应具备的职业道…