#vu3# element plus表格的序号字段

Miraitowa_chole2024-02-10 18:08

在表格中添加序号字段，可以使用以下几种方式来实现

1. 利用索引

在<el-table>组件的<el-table-column>中使用插槽来显示序号。示例：

<el-table :data="tableData">
  <el-table-column label="序号" type="index" width="60"></el-table-column>
  <el-table-column label="其他字段" prop="otherField"></el-table-column>
  <!-- 其他表格列 -->
</el-table>

2. 使用计算属性

在Vue组件中，你可以使用计算属性来动态计算序号字段。示例：

<el-table :data="tableData">
  <el-table-column label="序号" width="60">
    <template #default="{ $index }">
      {{ $index + 1 }}
    </template>
  </el-table-column>
  <el-table-column label="其他字段" prop="otherField"></el-table-column>
  <!-- 其他表格列 -->
</el-table>

3. 在数据中添加序号字段

在获取数据后，可以通过遍历数据的方式为每一行添加序号字段。

// 在获取数据后
tableData.forEach((item, index) => {
  item.serialNumber = index + 1;
});

// 在表格中使用
<el-table :data="tableData">
  <el-table-column label="序号" prop="serialNumber" width="60"></el-table-column>
  <el-table-column label="其他字段" prop="otherField"></el-table-column>
  <!-- 其他表格列 -->
</el-table>

4.通过页码和页数添加序号字段

 <!-- //序号计算
比如第一页  （1-1）*10 +（0+1）    1,2,3,4,5,6,7,8,9，10
比如第二页 （2-1）*10 +（0+1）   11，12,13,14，15,16,17,18,19,20 -->
<el-table-column label="序号" width="90" align="center" fixed="left" prop="rank" >
    <template #default="{ $index, row }">
      {{ (data.queryParams.pageNum - 1) * data.queryParams.pageSize + $index + 1 }}
     </template>
</el-table-column>