element-UI el-table添加序號列

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>