element-ui实现产品分页

分页是每个项目必不可少的一个功能，本节讲解使用 element-ui 实现产品分页功能。

进入 element-ui 官网，找到分页组件，在 main.js 全局引入分页组件，代码如下。

import { carousel, carouselItem, pagination } from 'element-ui';

Vue.use(carousel);
Vue.use(carouselItem);
// 分页组件
Vue.use(pagination);

返回 productList/index.vue 组件，引入分页代码，代码如下。

视图层代码（代码为官方提供，直接复制即可）如下。

<div class="index_hot_main">
  <ul>
    <li v-for="(item, i) in allList" :key="i">
      <img :src="item.productImageUrl" />
      <p>
        {{ item.productName }}<br />{{ item.salePrice }}元
      </p>
    </li>
  </ul>
</div>
<div class="block">
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="page"
    :page-sizes="[3, 6, 9, 12]"
    :page-size="size"
    layout="sizes, prev, pager, next"
    :total="total"
  >
  </el-pagination>
</div>
<!--分页end-->

JS 逻辑代码如下。

export default {
  data() {
    return {
      allList: [],
      page: 1,
      size: 6,
      sort: null,
      priceGt: null,
      priceLte: null,
      isactive: 0,
      total: 0
    };
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getAll();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getAll();
    }
  }
};

上述代码均由 element-ui 官方提供，没有详细注释，建议观看视频学习此章节。