如何在vue中封装Element分页组件

如何在vue中封装一个Element分页组件，主要有有3个步骤。

1、安装 Element

npm i element-ui -S

在main.js中引入Element

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2、封装分页页面。

3、在需要的列表页码引入组件，传入参数。

页面展示：

引入组件：

import Pagination from '@/components/Pagination'

components: { Pagination }

传参：

//定义分页对象
pager: {
       total: 0,
       page: 1,
       rows: 20,
      },


//传参
queryPageList().then(res => {
      const data = res.data;
      this.tableData = data.recordList;
      this.pager.total=data.totalCount
      this.pager.page=data.beginPageIndex
 });

把查到的列表数据的数量信息，赋给pager对象，即实现动态传参。

翻页：

getItemList() {
      //列表查询
      queryPageList().then(res => {
        const data = res.data;
        this.tableData = data.recordList;
        this.pager.total=data.totalCount
        this.pager.page=data.beginPageIndex
        });
    }

以上3步就完成了分页组件的分装，在需要的页面引入，传入相应的参数即可。