当前位置: 首页 > 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>

相关文章:

  • 【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图)
  • 我在哪,要去哪
  • 多家外资看好中国市场!野村建议“战术超配”,花旗上调恒指目标价
  • 上海北外滩,未来五年将如何“长个子”“壮筋骨”?
  • 专访|导演刘江:给谍战题材注入现实主义的魂
  • 寒武纪陈天石:公司的产品力获得了行业客户广泛认可,芯片市场有望迎来新增量需求
  • 姚洋将全职加盟上海财经大学,担任滴水湖高级金融学院院长
  • 新买宝马竟是“维修车”,男子发视频维权被4S店索赔100万