ElementUI Pagination 分页组件

1、实现效果：  

2、实现代码： 

2-1、首先获取到服务器数据

（ 我从服务器获取的数据保存在vuex中 ）

// index.vue js部分
data() {
    return {
      pagination: {
        current: 1, // 当前第几页
        size: 10,   // 一页展示几条数据
      }
    }
},

mounted() {
    this.getTableList()
},

methods: {
    getTableList() {
      this.$store.dispatch('getTableList', {
        current: this.pagination.current,
        records: this.form,
        size: this.pagination.size,
      })
    },
}

// vuex仓库
const actions = {
 async getTableList({ commit }, payLoad) {
    try {
      let result = await getTableList(payLoad)
      console.log(result);
      if (result.code == 1) {
        commit('GETTABLELIST', result.data)
      }
    } catch (error) {
      Message('数据获取失败,请重试!')
    }
  }
}

const mutations = {
  GETTABLELIST(state, tableList) {
    state.tableList = tableList
  },
}

const state = {
  tableList: []
}

import { mapState } from 'vuex' 

 computed: {
    ...mapState({
      tableListArr: state => state.worksearch.tableList,
    }),
  }

2-1、分页静态搭建及渲染数据

// index.vue HTML部分
<el-pagination 
    @size-change="handleSizeChange"        //每一页数量发生变化自定义事件（下拉菜单）
    @current-change="handleCurrentChange"  //当前页码发生变化自定义事件
    :current-page="pagination.current"            //当前第几页
    :page-sizes="[10, 30, 50, 100]"               //下拉菜单条数
    :page-size="pagination.size"                  //一页展示几条数据
    layout="total,prev,pager,next,sizes,jumper"   //分页组件布局顺序
    :total="parseInt(tableListArr.total)"  //一共展示数据条数
    // total数据parseInt将后台返回的String类型转为Number类型
>
</el-pagination>


// index.vue js部分
methods:{
    handleSizeChange(val) {
      this.pagination.size = val
      this.getTableList()
    },
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getTableList()
    },
}

分页完成！有问题欢迎在评论区留言哦～