码迷,mamicode.com
首页 > 其他好文 > 详细

vue中使用element-ui实现分页

时间:2020-07-10 18:57:34      阅读:76      评论:0      收藏:0      [点我收藏+]

标签:span   round   box   加载   err   数据加载   div   javascrip   list   

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

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>

  

 

vue中使用element-ui实现分页

标签:span   round   box   加载   err   数据加载   div   javascrip   list   

原文地址:https://www.cnblogs.com/qqm123/p/13280662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!