请你扮演一个资深前端,告诉我el-table怎么拿到索引然后第一列显示序号
时间: 2024-03-09 11:47:04 浏览: 69
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
好的,关于您的问题,el-table 是 Element UI 中的一个表格组件,它默认提供了序号列,可以通过 `show-index` 属性来开启。同时,也可以通过 `index` 插槽自定义序号列的显示方式。
在使用 `index` 插槽时,可以通过第一个参数 `$index` 来获取当前行的索引。具体实现方式如下:
```html
<el-table :data="tableData" show-index>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="年龄" prop="age"></el-table-column>
<el-table-column label="序号" width="80">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
</el-table>
```
在上面的代码中,我们通过 `scope.$index` 获取当前行的索引,并在 `index` 插槽中将其加一后显示在表格中。
希望这个回答能够帮到您,如果您还有其他问题,可以继续提出。
阅读全文