element 前端分页

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-sizes="[10]"
      :page-size="limit"
      layout="total, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

export default{
	data(){
	 page: 1, // 分页 页数
	            limit: 10, // 分页 当前条数
	            total: null, //分页 总条数
	            tableList: [], // 分页数据
	            tableData:{itemList:[]},  // 页面总数据
	},
	async created(){
	await this.init()
	},
	methods:{
		// 获取总数据
	async init(){
		this.tableData = await XXXX()
		},
		// 分页处理数据
        getList() {
            this.tableList = this.tableData.itemList.filter((item, index) => {
                return index < this.page * this.limit && index >= this.limit * (this.page - 1)
            })
            this.total = this.tableData.itemList.length
        },
        // 当每页数量改变
        handleSizeChange(val) {
            console.log(`每页${val}条`);
            this.limit = val
            this.getList()
        },
        // 当当前页改变
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            this.getList()
        },
	}
}



 
上一篇:vue 后台返回的一维数组怎样变成二维数组


下一篇:react之装饰器的安装及使用