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>