vue分页效果

vue项目中实现分页效果

1.这里我们使用element-ui来实现，先使用npm安装

npm i element-ui -S

2.在main.js中全局引入

import ElementUI from "element-ui"
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI) //将element-ui挂在到全局

3.封装组件

<template>
  <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="6"                
      layout="prev, pager, next, jumper"
      :total="total"
      :pager-count="5"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ["num", "page"],   //传入的总条数，和页码
  data() {
    return {};
  },
  computed: {
    currentPage: function() {
      return this.page;
    },
    total: function() {
      return this.num;
    }
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("size-change", val);
    },
    handleCurrentChange(val) {
      this.$emit("current-change", val);
    }
  }
};
</script>

<style>
.block {
  text-align: right;
  /* width: 100%; */
}
</style>

4.引入组件并使用

<template>
  <div class="mobild">
        <div>
        <ATablePaging
          :num="num"
          :page="page"
          @current-change="(val) => { 
           page = val;
            list();
          }"
        ></ATablePaging>
      </div>
  </div>
</template>

<script>
import ATablePaging from "../paging";    //引入分页组件
export default {
  data() {
    return {
      page:"",  //当前页码
      num: 1,   //内容总条数
    };
  },
  methods: {
    list() {
        //发送的http请求  
        //后端返回的总页数等于num
    },
  },
  mounted() {
    this.news();
  },
  components: {
    ATablePaging
  }
};
</script>

<style scoped>
</style>>