elementui + vue2实现表格行的上下移动

news2024/11/19 21:19:20

场景:

在这里插入图片描述
如上,要实现表格行的上下移动

实现:

<el-dialog
          append-to-body
          title="条件编辑"
          :visible.sync="dialogVisible"
          width="60%"
        >
          <el-table :data="data1" border style="width: 100%">
            <el-table-column type="index" label="序" width="100" align="center">
            </el-table-column>
            <el-table-column prop="edit" label="" align="center">
              <template slot-scope="scope">
                <el-button
                  :disabled="scope.$index === 0"
                  plain
                  type="primary"
                  icon="el-icon-top"
                  @click="moveUp(scope.$index, scope.row)"
                  >上移</el-button
                >
                <el-button
                :disabled="scope.$index === data1.length - 1"
                  plain
                  type="primary"
                  icon="el-icon-bottom"
                  @click="moveDown(scope.$index, scope.row)"
                  >下移</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
  // 上移
    moveUp(index, row) {
     if(index !== 0){
      const currentRow = row;
      this.data1.splice(index, 1);
     this.data1.splice(index - 1, 0, currentRow);
     }
    },
    // 下移
    moveDown(index, row) {
     if(index !== this.data1.length-1){
      const currentRow = row;
      this.data1.splice(index, 1);
     this.data1.splice(index + 1, 0, currentRow);
     }
    },

参考:

点击上移或下移按钮对当前行进关联操作,如果是表格第一行则不能上移,如果是表格的最后一行,则不能进行下移,不能思意就是禁用。
当前需要获取到表格的index,可以通过:row-class-name="tableRowClassName"这个方法


---

# 原因分析:
> 上移禁用功能可以根据row.index ===0 来判断,下移禁用根据row.index === tableDate.length - 1 来判断

---

# 解决方案:
>提示:这里填写该问题的具体解决方案:
关键性代码:
   //  上移功能
	moveUp(index) {
      const currentRow = this.tableData.splice(index, 1)[0]
      this.tableData.splice(index - 1, 0, currentRow)
    }
  //  下移功能
  moveDown(index) {
      const currentRow = this.tableData.splice(index, 1)[0]
      this.tableData.splice(index + 1, 0, currentRow)
   }




原文

splice的使用

在这里插入图片描述
原文

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

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

相关文章

mybatis高级扩展-插件和分页插件PageHelper

1、建库建表 create database mybatis-example; use mybatis-example; create table emp (empNo varchar(40),empName varchar(100),sal int,deptno varchar(10) ); insert into emp values(e001,张三,8000,d001); insert into emp values(e002,李四,9000,d001); insert into…

MATLAB代码:分布式电源接入对配电网影响分析

微♥关注“电击小子程高兴的MATLAB小屋”获取专属优惠 关键词&#xff1a;分布式电源 配电网 评估 仿真平台&#xff1a;MATLAB 主要内容&#xff1a;代码主要做的是分布式电源接入场景下对配电网运行影响的分析&#xff0c;其中&#xff0c;可以自己设置分布式电源接入…

【信息学奥赛】拼在起跑线上,想入道就别落下自己!

编程无难事&#xff0c;只怕有心人&#xff0c;学就是了&#xff01; 文章目录 1 信息学奥赛简介2 信息学竞赛的经验回顾3 优秀参考图书推荐《信息学奥赛一本通关》4 高质量技术圈开放 1 信息学奥赛简介 信息学奥赛&#xff0c;作为全国中学生学科奥林匹克“五大学科竞赛”之一…

LeetCode刷题--- 二叉树剪枝

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏&#xff1a;http://t.csdnimg.cn/ZxuNL http://t.csdnimg.cn/c9twt 前言&#xff1a;这个专栏主要讲述递归递归、搜索与回溯算法&#xff0c;所以下面题目主要也是这些算法做的 我讲述…

分析若依的文件上传处理逻辑

分析若依的文件上传处理逻辑 注&#xff1a;已经从若依框架完成拆分&#xff0c;此处单独分析一下人家精彩的封装&#xff0c;也来理解一下怎么做一个通用的上传接口&#xff01;如有分析的&#xff0c;理解的不透彻的地方&#xff0c;大家多多包含&#xff0c;欢迎批评指正&am…

Linux Zabbix企业级监控平台本地部署并实现远程访问

前言 Zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。能监视各种网络参数&#xff0c;保证服务器系统的安全运营&#xff1b;并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 本地zabbix web管理界面限制在只能局域…

数据结构 | DFSBFS,Prim代码

树的DFS&BFS prim算法 图的DFS和BFS DFS

Java小案例-RocketMQ的11种消息类型,你知道几种?(延迟消息)

前言 上一节给大家讲了Rocket的顺序消息&#xff0c;这一节和大家聊一下延迟消息&#xff0c;关于顺序消息大家可以点下面这个链接直接看 RocketMQ的延迟消息 延迟消息 延迟消息就是指生产者发送消息之后&#xff0c;消息不会立马被消费&#xff0c;而是等待一定的时间之后…

JMeter下载与安装

文章目录 前言一、安装java环境&#xff08;JDK下载与安装&#xff09;二、JMeter下载三、JMeter安装1.解压缩2.配置环境变量 四、JMeter启动&#xff08;启动成功则代表JMeter安装成功&#xff09;五、JMeter汉化&#xff08;将JMeter修改成中文&#xff09;1.方法一&#xff…

【Linux】内核结构

一、Linux内核结构介绍 Linux内核结构框图 二、图解Linux系统架构 三、驱动认知 1、为什么要学习写驱动2、文件名与设备号3、open函数打通上层到底层硬件的详细过程 四、Shell Shell脚本 一、Linux内核结构介绍 Linux 内核是操作系统的核心部分&#xff0c;它负责管理系…

【Android】MVC与MVP的区别,MVP网络请求实践

一、MVC模式 目录 一、MVC模式二、MVP模式 1、MVP的简单应用 1.1 导入相关依赖包并设置权限1.2 实现Model1.2 实现Presenter1.3 实现View1.4分析项目结构和绑定过程1.5效果展示 2、MVP结合RxJava 一、MVC模式 MVC&#xff08;Model(模型)——View(视图)——Controller(控制…

三层交换,DHCP的详解与VRRP

目录 一、三层交换 1、三层交换机的作用&#xff1a; 2.vlan的虚拟接口vlanif&#xff08;ifinterface接口&#xff09; 3.三层交换机实验 4.拓展实验​编辑 二、DHCP 1.自动获取ip地址&#xff1a; 2.DHCP的好处&#xff1a; 3.分配方式&#xff1a; 4.举例&#xff…

6.rk3588获取摄像头和激光雷达数据(用线程根据时间同步)

文件夹结构如下&#xff1a; 如果没有特殊说明&#xff0c;我们将py文件写在该路径里面。 保存数据的路径如下&#xff1a; ---img_lidar_save ---2023-12-13&#xff08;根据日期自动生成当天保存数据的文件夹) ---camera_data(相机数据文件夹&#xff09; ---image(保存相加…

C++1114新标准——模板模板参数(Template Template Parameter)、using

系列文章目录 C11&14新标准——Variadic templates&#xff08;数量不定的模板参数&#xff09; C11&14新标准——Uniform Initialization&#xff08;统一初始化&#xff09;、Initializer_list&#xff08;初始化列表&#xff09;、explicit C11&14新标准—— d…

SpringBoot 究竟是如何跑起来的

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《SpringBoot》。&#x1f3af;&#x1f3af; &…

怎么把文件转成附件放在公众号里?这篇教程给你详细说清楚

文件转附件&#xff0c;其实就是把文件上传到某个网站&#xff0c;获得文件的下载链接&#xff0c;从而放到文章或者其他地方供读者下载使用。因为公众号并不支持直接在文章里面添加下载链接&#xff08;至少订阅号不行&#xff09;&#xff0c;所以把文件转成下载链接的方式并…

怎么制作GIF动图?教你这几个简单方法

怎么制作gif动图&#xff1f;GIF动图是一种非常有趣且实用的图片格式&#xff0c;它能够以短小精悍的方式展示动画效果&#xff0c;因此在社交媒体和聊天应用中备受追捧。本文将向您介绍几种制作GIF动图的方法&#xff0c;让您轻松制作出自己的动图。 GIF动图制作方法一&#x…

Spark编程实验一:Spark和Hadoop的安装使用

一、目的与要求 1、掌握在Linux虚拟机中安装Hadoop和Spark的方法&#xff1b; 2、熟悉HDFS的基本使用方法&#xff1b; 3、掌握使用Spark访问本地文件和HDFS文件的方法。 二、实验内容 1、安装Hadoop和Spark 进入Linux系统&#xff0c;完成Hadoop伪分布式模式的安装。完成Ha…

【开源项目】智慧水厂—经典开源项目实景三维数字孪生智慧水厂

智慧水务可视化平台是以物联网IOT技术为核心&#xff0c;以数据库系统为支撑&#xff0c;以城市水资源安全提升和建造智能化为目标的智慧水务体系。飞渡科技利用数字孪生技术结合物联网IOT技术&#xff0c;建立起多个基础数据及管理层级矩阵&#xff0c;可以跨部门、跨层级进行…

【Java 集合】ConcurrentLinkedQueue

在日常中, 我们用到的数据结构有很多: 数组, 链表, 树等, 而在这些结构中, 还有一个叫做队列的存在。 和其他的集合相同, Java 原生提供了不同的实现。 而如果我们需要一个线程安全的队列的话, 可以基于实际的场景进行选择, 比如基于数组实现同时操作上会阻塞的 ArrayBlockingQ…