vue实现表格序号

实现表格序号的方法

在Vue中为表格添加序号列有多种方式，以下是常见的实现方法：

使用计算属性或方法生成序号

在表格数据渲染时，通过计算属性或方法动态生成序号列：

<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 },
        { id: 3, name: '王五', age: 28 }
      ]
    }
  }
}
</script>

分页时的序号处理

当表格有分页功能时，序号需要结合当前页码计算：

<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in currentPageData" :key="item.id">
        <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
        <td>{{ item.name }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableData: [...],
      currentPageData: []
    }
  },
  methods: {
    getCurrentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      this.currentPageData = this.tableData.slice(start, start + this.pageSize)
    }
  }
}
</script>

使用Element UI等组件库的序号列

如果使用Element UI等UI组件库，可以更简单地实现序号列：

<template>
  <el-table :data="tableData">
    <el-table-column
      type="index"
      label="序号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
  </el-table>
</template>

自定义序号格式

需要自定义序号格式时，可以使用作用域插槽：

<template>
  <el-table :data="tableData">
    <el-table-column
      label="序号"
      width="80">
      <template #default="scope">
        {{ `NO.${scope.$index + 1}` }}
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
  </el-table>
</template>

固定宽度的序号列

为序号列设置固定宽度，确保表格布局整齐：

<style scoped>
table {
  width: 100%;
}
th:nth-child(1), td:nth-child(1) {
  width: 60px;
  text-align: center;
}
</style>

以上方法可以根据具体需求选择使用，简单的表格可以直接使用v-for的索引，复杂表格建议使用UI组件库提供的功能。