vue中使用element-ui实现分页

Posted 2020-12-16 qqm123

请求数据加载之后进行分页

1.使用npm安装

npm install element-ui -S

2.在main.js中引用

import ElementUI from ‘element-ui‘;
import ‘element-ui/lib/theme-chalk/index.css‘;


Vue.use(ElementUI);

3.在组件中的使用

<template>
    <div class="all">
        <ul>
          <li
            class="single-box"
            v-for="(goods, index) in goodsData.slice((currentPage- 
    1)*pagesize,currentPage*pagesize)"
            :key="index"
          >
           
          </li>
        </ul>
        <div class="fenye">
        <el-pagination 
          background layout="prev, pager, next" 
          :page-size="pagesize"
          @current-change="current_change"
          :current-page.sync="currentPage"
          :pager-count="5"   
          :total="goodsData.length"
        >
        </el-pagination>
      </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    name:‘ListShow‘,
    data(){
        return{
            goodsData:[],
            pagesize:10,//每页多少数据
            currentPage:1  //默认当前页为第一页
        }
    },
    methods:{
         current_change(currentPage){  //改变当前页
             this.currentPage = currentPage
         }
     },
     mounted(){
         axios
      .get("../../../data/data.json")
      .then((res) => {
        this.goodsData = res.data;
        console.log(res.data);
      })
      .catch((err) => {
        console.error(err);
      });
     }
}
</script>