Vue将后端传回来的对象数组进行表格分页并自定义编号展示

【前言】

最近写一个前后端交互的小东西，传回来的数据自带编号（编号不一定是从1开始），有时只传回一个数据，但是它的编号是4，导致很不美观，我希望在不改变数据本身的编号下，自定义排序，让他是1。并且还能对传回来的对象数组，单独处理一个对象，不影响其他的对象

查阅了相关资料，最终得以解决，附上代码

<template>
  <el-table :data="tableData">
  <el-table-column label="序号" width="100">
    <!-- 自定义列内容 -->
    <template slot-scope="scope">
    {{ scope.$index + 1 }}
    </template>
  </el-table-column>
  <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width">
  </el-table-column>
  <el-table-column label="操作" width="100">
    <!-- 自定义列内容 -->
    <template slot-scope="scope">
    <el-button type="danger" icon="el-icon-delete" @click="deleteItem(scope.row)"></el-button>
    </template>
  </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
  return {
    tableData: [
    { id: 4, name: 'John', age: 25 },
    { id: 5, name: 'Jane', age: 30 },
    { id: 6, name: 'Mark', age: 35 }
    ],
    tableColumns: [
    { prop: 'name', label: 'Name', width: '200' },
    { prop: 'age', label: 'Age', width: '160' },
    ]
  };
  },
  methods: {
  deleteItem(item) {
    alert(JSON.stringify(item));
    // 处理删除项的逻辑
    const index = this.tableData.indexOf(item);
    if (index > -1) {
    this.tableData.splice(index, 1);
    }
  }
  }
};
</script>