element-UI——el-table添加序號

轉載自：https://www.cnblogs.com/langxiyu/p/10641060.html

Part.1 示例

當我們想在 el-table 中添加序號列時，如下：

<el-table-column
        label="序號"
        type="index"
        width="50"
        align="center">
</el-table-column>

Part.2  問題

我們會驚奇的發現，我們翻頁時，序號永遠都是從1開始。因為每一次翻頁都是根據當前數據的index顯示，所以我們要自定義

Part.3  解決

關鍵代碼：

(page - 1) * pageSize + scope.$index + 1 // (當前頁 - 1) * 當前顯示數據條數 + 當前行數據的索引 + 1

改造如下：

<el-table-column
        label="序號"
        type="index"
        width="50"
        align="center">
    <template scope="scope">
        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
    </template>
</el-table-column>