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