纯前端实现分页渲染展示（Vue+element）

主要是用分割数据下标的方式进行切换 直接把所有数据添加到allList即可  已经测试过了 没有问题 

具体参考了前端实现分页(vue+ElementUI) - 简书 (jianshu.com)

export default {
    data(){
        return{
            // 总数据
            allList:[],

            // 展示的数据
            roleList:[],

            // 当前页码
            currentPage: 1,

            // 当前页数 默认一页十条
            pageSize:10,
        };
    },
    mounted(){
        this.pagine()
    },
    methods: {
        // 默认显示
        pagine(){
          this.roleList = this.allList.slice(0, 10)
        },

        // 分页器
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val
          this.roleList = this.allList.slice(0, val)
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.roleList = this.allList.slice((val - 1) * this.pageSize, val * this.pageSize)
          console.log((val - 1) * this.pageSize, val * this.pageSize);
        },
    }
}