el-table实现分页 序号

序言：根据需求实现表格添加序号，根据组件给的方法实现了添加序号，但分页后都是从1开始的，不符合序号连贯起来的要求

1. 设计给数据分页处理，由于这里写的是固定数据，因此要为tableData数据实现分页

//涉及js方法slice
定义和用法：
slice()以新的数组对下个，返回被选中的元素；
slice()方法选择从给定的start参数开始的元素，并在给定的end参数处结束，但不包括；
注意：slice()方法不会改变原数组

2. 实现给表格添加序号

//html代码
<el-table :data="tableData.slice((st-1)*limit,st*limit)" style="width: 100%">
    <el-table-column  label="序号"  width="60"  type="index" >
    </el-table-column>
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
</el-table>
<el-pagination
    layout="prev, pager, next"
    :current-page.sync="st"
    :page-size="limit"
    :total="count">
</el-pagination>

//js部分代码
<script>
let vue = new Vue({
    el: "#element",
    data: { 
        st:1,
        limit:10,               
        tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },{
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },]
    },
    computed:{
        count:function(){
            return this.tableData.length;
        }
    }
})
</script>

• 结果如图所示
  
• 下一步实现序号连贯

给index的table-cloumn添加一个index的方法
<el-table-column  label="序号"  width="60"  type="index"  :index='indexMethods>
</el-table-column>

//js方法
indexMethods(){
	return (this.st - 1)*this.limit+index+1;
}
//st:页码 limit:每页条数

• 实现效果如下所示：