<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-buttonsize="mini":disabled="scope.$index === 0"@click="moveRow(scope.$index, 'up')">上移</el-button><el-buttonsize="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>
