vue结合element-ui前端实现基本的分页

<template>
   <el-pagination
        :current-page.sync="userQuery.currentPage"
        :page-sizes="userQuery.pageSize"
        layout="total, prev, pager, next"
        :total="userQuery.totals"
        @current-change="currentChange"
    />
<template/>

<script>
export default{
   data() {
       return {
      		userQuery: {
       			totals: 0,
        		pageSize: [10],
        		currentPage: 1, // 当前页
        		currentPageData: [] // 当前页显示内容
        		},
		}
</script>

methods: {
	 // 用户分页
    currentChange(val) {
      this.setCurrentPageData()
    },
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData() {
      const begin = (this.userQuery.currentPage - 1) * this.userQuery.pageSize
      const end = this.userQuery.currentPage * this.userQuery.pageSize
      this.userQuery.currentPageData = this.roleNames.slice(
        begin,
        end
      )
      this.userQuery.totals = this.roleNames.length
      if (this.userQuery.currentPage > 1 && this.userQuery.currentPageData.length === 0) {
        --this.userQuery.currentPage
        this.setCurrentPageData()
      }
    },
}