当前位置: 首页 > news >正文

el-table的向上移动向下移动,删除选定行

<template>
  <el-table :data="tableData" border style="width: 100%">
    <!-- 其他列 -->
    <el-table-column label="ID">
         <template slot-scope="scope">{{ scope.$index }}</template>
    </el-table-column>
    <el-table-column label="名称" prop="name"></el-table-column>
    <!-- 操作列:上下移动 -->
    <el-table-column label="操作" width="120">
      <template slot-scope="scope">
        <el-button
          size="mini"
          :disabled="scope.$index === 0"
          @click="moveRow(scope.$index, 'up')"
        >上移</el-button>
        <el-button
          size="mini"
          :disabled="scope.$index === tableData.length - 1"
          @click="moveRow(scope.$index, 'down')"
        >下移</el-button>
    <el-button @click="delRow(scope.$index)">删除一行</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "第 1 行",ID:"" },
        { name: "第 2 行",ID:"" },
        { name: "第 3 行",ID:""},
        { name: "第 4 行",ID:""}
      ]
    };
  },
  methods: {
    // 行移动逻辑
    moveRow(index, direction) {
      const newIndex = direction === 'up' ? index - 1 : index + 1;

      // 边界检查
      if (newIndex < 0 || newIndex >= this.tableData.length) return;

      // 交换数组元素
      const temp = this.tableData[index];
      this.$set(this.tableData, index, this.tableData[newIndex]);
      this.$set(this.tableData, newIndex, temp);
      console.log(this.tableData)
    },   
  delRow(index){
   if (this.tableData.length > 0) {
           //this.tableData.pop(); // 删除数组最后一个元素
           this.tableData.splice(index,1)
   }
},
  }
};
</script>
http://www.dtcms.com/a/76121.html

相关文章:

  • 【Git学习笔记】Git分支管理策略及其结构原理分析
  • 探秘Transformer系列之(15)--- 采样和输出
  • 小程序API —— 53 本地存储
  • 1~2 课程简介+ESP32-IDF环境搭建(虚拟机Linux环境下)
  • 大语言模型的压缩技术
  • AI如何在财务工作中提升效率的一些看法
  • JavaScript日期区间计算:精准解析年月日差异
  • EG8200多协议图形化编程边缘计算网关
  • Python----计算机视觉处理(Opencv:图像镜像旋转)
  • 大数据分析方法(65页PPT)
  • cmake 之 check_language()
  • AIP-182 外部软件依赖
  • Linux 网络基础设置
  • jenkins pipline 自动化测试
  • 案例驱动的 IT 团队管理:创新与突破之路:第三章 项目攻坚:从流程优化到敏捷破局-3.1.2需求分级与资源调配策略
  • 海康SDK协议在智联视频超融合平台中的接入方法
  • springboot+自定义注解+AOP实现权限控制(一)
  • EasyRTC嵌入式音视频通话SDK:如何解决跨平台(Linix、Windows、ARM、物联网)、跨设备(Android、ios等)的兼容性难题?
  • 前端Vue3图像编辑功能(并生成mask图)
  • 我在哪,要去哪
  • Zbrush插件安装
  • Android Studio最后一个绑定JDK8的版本,但是官方下载是最新的,怎么下载Android Studio历史版本包,这篇文章帮你解决。
  • Java进阶核心技术解析:多线程、集合框架与反射深度实战
  • 车载网络测试【E2E-AUTOSAR E2E Profile 1】
  • 4.3--入门知识扫盲,IPv4的头部报文解析,数据报分片,地址分类(包你看一遍全部记住)
  • Docker搭建MySQL主从服务器
  • 电商无人直播防封指南:三要素构建智能防护(场景切换/实时互动/自动审核)
  • JavaScript日期区间计算
  • Docker换源加速(更换镜像源)详细教程(2025.3最新可用镜像,全网最详细)
  • Using SAP S4hana An Introduction for Business Users