0
点赞
收藏
分享

微信扫一扫

Autovue R21.1 发布

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

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>
举报

相关推荐

0 条评论