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>
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper9 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱9 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖10 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀10 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴10 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录10 小时前
JavaScript屏幕切换检测方案
前端·javascript