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

场景:

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

实现:

<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的使用

在这里插入图片描述
原文

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python之random模块详解

python的random模块 random模块是python中一个生成随机数的模块。 random不是python解释器内置的模块。 导入random模块的方法是&#xff1a; import random 如果只使用random模块中的单个方法的话&#xff0c;也可以使用 from random import method_name 例如&#xff1a; …

中医处方软件西医电子处方系统,一键生成处方单可设置配方模板教程

一、前言 有的诊所是中医和西医都有&#xff0c;医师是全科医师&#xff0c;那么所使用的软件既要能开中药处方也要能开西药处方&#xff0c;而且可以通过一键生成配方&#xff0c;则可以节省很多时间。 下面就以 佳易王诊所卫生室电子处方为例说明 如上图&#xff0c;如果是…

Python Pandas 如何给DataFrame增加一行/多行 数据(第6讲)

Python Pandas 如何给DataFrame增加一行/多行 数据(第6讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…

【Linux】进程周边004之进程的调度与切换(领略Linux系统进程调度算法的神奇)

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.进程切换 2.进程调度 2.…

十四 动手学深度学习v2计算机视觉 ——转置矩阵

文章目录 基本操作填充、步幅和多通道再谈转置卷积不填充&#xff0c;步幅为1填充为p&#xff0c;步幅为1填充为p&#xff0c;步幅为s 基本操作 填充、步幅和多通道 填充&#xff1a; 与常规卷积不同&#xff0c;在转置卷积中&#xff0c;填充被应用于的输出&#xff08;常规卷…

ospf 知识总结

ospf 知识总结 一、ospf的概念 - 开放式最短路径优先协议&#xff0c;是广泛使用的一种动态路由协议&#xff0c;它属于链路状态路由协议&#xff0c;是一个内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在单一自治系统&#xff08;AS&#xff09;内决策路由。 - …

OpenHarmony - 应用开发入门指南

一、了解OpenHarmony OpenHarmony是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的开源项目, 目标是面向全场景、全连接、全智能时代, 搭建一个智能终端设备操作系统的框架和平台, 促进万物互联产业的繁荣发展。 开放原子开源基金会&#xff1a; 由阿里巴巴、百度、华…

数据分析为何要学统计学(7)——什么问题适合使用t检验?

t检验&#xff08;Students t test&#xff09;&#xff0c;用于通过小样本&#xff08;样本容量n < 30&#xff09;对总体均值水平进行无差异推断。 t检验要求样本不能超过两组&#xff0c;且每组样本总体服从正态分布&#xff08;对于三组以上样本的&#xff0c;要用方差…

yolov8实战第二天——yolov8训练结果分析(保姆式解读)

yolov8实战第一天——yolov8部署并训练自己的数据集&#xff08;保姆式教程&#xff09;-CSDN博客 我们在上一篇文章训练了一个老鼠的yolov8检测模型&#xff0c;训练结果如下图&#xff0c;接下来我们就详细解析下面几张图。 一、混淆矩阵 正确挑选&#xff08;正确&#…

CompletableFuture原理解析

文章目录 一、 Callable、Future介绍1. 简介2. 底层原理 二、 FutureTask介绍1. 简介2. 底层原理 三、CompletionService1. 简介2. 原理3. 源码分析4. 总结 四、CompletableFuture1. 简介2. 案例3. 源码分析 一、 Callable、Future介绍 1. 简介 Future 是用于表示异步计算结果…

美客多、亚马逊卖家借助自养号测评增加销量和提升店铺排名的方法

在跨境电商的浩瀚领域中&#xff0c;成功打造并运营一个具有竞争力的店铺如同航行在大海中的一艘船&#xff0c;需要精准的航向和持续的努力。亚马逊&#xff0c;美客多这个广袤的电商平台&#xff0c;如同一片繁星点点的海域&#xff0c;需要卖家们以巧妙的策略和专注的态度航…

解锁知识的新大门:自建知识付费小程序的技术指南

在数字化时代&#xff0c;知识付费小程序的崛起为创作者和学习者提供了全新的学习和分享方式。本文将以“知识付费小程序源码”为关键词&#xff0c;从技术角度出发&#xff0c;为你展示如何搭建一个独具特色的知识付费平台。 步骤1&#xff1a;选择适用的知识付费小程序源码…

MHA高可用实验(故障模拟+恢复)

实验前准备 MHA manager节点服务器&#xff1a;192.168.188.13 MHA node和manager组件 Master节点服务器&#xff1a;192.168.188.14 mysql5.7、MHA node组件 Slave节点服务器1&#xff1a;192.168.188.15 mysql5.7、MHA node组件 Slave节点服务器2&#xff1a;192.…

Peter算法小课堂—简单建模(3)

国王的奖赏系列 国王的奖赏1 题目描述&#xff1a; 你作为战斗英雄得到国王的奖赏&#xff0c;可以在地图上选一块土地。地图里共n*m格土地&#xff0c;第x行第y列的土地格子里标记着d[x][y]的整数价值&#xff0c;可能出现负数。国王让你选择若干列土地&#xff0c;只要是连…

商业印刷市场分析:预计2029年将达到53004亿元

商业印刷技术显示了强大的生命力。电子商务的扩张性发展&#xff0c;传统的商务印刷行业也在逐渐的转型。中国印刷业已深度融入全球印刷加工产业链&#xff0c;为国际社会超过50个国家提供印刷包装服务。数据显示&#xff0c;中国印刷业对外加工贸易额已达842亿元。 商业印刷是…

C++模板进阶

文章目录 前言反向迭代器反向迭代器和正向迭代器的区别stl反向迭代器源码反向迭代器模拟实现测试 模板进阶非类型模板参数Array 模板的特化模板的分离编译 前言 模板进阶也没有到一些特别的东西&#xff0c;就是讲比较偏的一些特性。 在这里我们先来讲一下反向迭代器。 反向迭…

一张图系列 - “leetcode快速复习“

什么是leetcode&#xff1f; LeetCode是一个在线评测平台&#xff0c;提供大量算法题目&#xff0c;可帮助程序员提高编程和算法能力。它主要提供算法和数据结构相关的练习题&#xff0c;包括各种难度级别的编程题&#xff0c;从简单的算法题到复杂的系统设计问题都有。用户可…

MATLAB图解傅里叶变换(初学者也可以理解)

1、概述 相信很多人对于傅里叶变换可能觉得比较复杂和有点难懂&#xff0c;其实不难&#xff0c;它只是一种积分变换。 傅里叶变换&#xff0c;表示能将满足一定条件的某个函数表示成三角函数&#xff08;正弦和/或余弦函数&#xff09;或者它们的积分的线性组合。也就是说&qu…

NPM开发工具的简介和使用方法及代码示例

NPM&#xff08;Node Package Manager&#xff09;是Node.js的包管理工具&#xff0c;用于管理和共享被发布到模块仓库的JavaScript代码。本文将介绍NPM的定义、使用方法、代码示例以及总结。 一、NPM的定义 NPM是Node.js的默认包管理工具&#xff0c;它的功能包括安装、管理、…

Vue--第八天

Vue3 1.优点&#xff1a; 2.创建&#xff1a; 3.文件&#xff1a; 换运行插件&#xff1a; 4.运行&#xff1a; setup函数&#xff1a; setup函数中获取不到this&#xff08;this 在定义的时候是Undefined) reactive()和ref(): 代码&#xff1a; <script setup> // …