Vue+ElemenyUI 实现分页_elementui分页源码

1.在main.js中注册

import ElementUI from 'element-ui'   //element ui
import 'element-ui/lib/theme-chalk/index.css'  //css样式
Vue.use(ElementUI, {size:"small"});  //挂载

2.在你所需要分页的页面进行代码编写

 <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        style="float: right"
      >
      </el-pagination>
 
 
 
// :data="tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)" 绑定数据的改变
<div id="content">
        <el-table :data="tableData.slice((currentPage - 1) * PageSize, currentPage * PageSize)" style="width: 100%">
           ...
</el-table>
</div>

methods中的代码da

 methods :{
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
  },

data的代码

data() {
    return {
      tableData: [
      ],//所要分页的数据
     currentPage: 1,
      // 总条数
      totalCount: 1,
      // 个数选择器,选择一页显示几条
      pageSizes: [10,20,30],
      // 默认每页显示的条数
      PageSize: 10,
    };
  },