好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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 >

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/youngKing0615/article/details/108646438

dy("nrwz");

查看更多关于vue项目实现分页效果的详细内容...

  阅读:44次