【案例】分页符el-pagination

<el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[3, 5, 10, ]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="copydesignData.length">
            el-pagination>
1
2
3
4
5
6
7
8
9

场景：

页面表格要求加一个分页符

思路一：（想挑战自己的，咱们前端就自己做）

不需要后端接口配合，需要后端一次将所有的数据都返回；

思路一：方案

var designData= []
rdd.forEach((item,index) => {
// 这里要注意这个index 一会用到，
    designData.push({index:index+1, id:item.id, begin_stake: item.begin_stake, end_stake:item.end_stake, total_length:item.total_length, wallrock_level:item.wallrock_level,geologic_desc:item.geologic_desc, editshow: false})
})
this.copydesignData = designData;  //  copydesignData 是为了做一个存储，为何呢？
this.get_size_Current(); // 单独定义的一个方法
1
2
3
4
5
6
7

get_size_Current() {
// 这是函数主要就是根据选择的一页显示几条数据和第几页的数据来获取对应的数据
    let last = this.size * this.Current
    let first = last - this.size + 1;
    let list = []
    for (let i = first; i <= last; i++) {
        for (let j = 0; j < this.copydesignData.length; j++) {
            if (i == this.copydesignData[j].index) {
                list.push(this.copydesignData[j])
            }
        }
    }
    this.designData = list;   // designData 是表格的data
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14

思路二：

需要后端接口配合，没请求一次携带者当前页和一页几条，或第几条到第几条的参数即可；

思路二：方案

思路二和思路一的解决方案主要区别就在于get_size_Current函数，思路二这个函数就放到后端做了

/api/get?a=每页条数&b=页码（第几页）
1

/api/get?a=第5条&b=第15条
1