ElementUI-pagination分页

“`

<template>

<el-pagination

      :page-size.sync=”pageSize”

      :page-sizes=”pageSizes”

      :current-page.sync=”currentPage”

      :pager-count=”pagerCount”

      background

      @size-change=”handleSizeChange”

      @current-change=”handleCurrentChange”

      layout=”sizes,prev,pager,next,jumper,->,total”

      :total=”50″

    ></el-pagination>

    <!– :total 属性设置总条数 –>

    <!– layout 设置分页的子组件：sizes,prev,pager,next,jumper,->,total,slot –>

    <!– :page-size 每页显示的条数（默认为10） =>进行数据双向绑定.sync–>

    <!– :page-sizes 每页显示个数选择器的选项设置，默认为[10,20,30,40,50,100] –>

    <!– .sync 修饰符可以和绑定的数据同步______其效果类似于:v-model –>

    <!– :current-page 当前页数，修饰符可以和绑定的数据同步 =>进行数据双向绑定.sync –>

    <!– :pager-count 页码按钮的数量，当总页数超过该值时，页码会折叠（默认是7），必须是5~21之间的基数 –>

    <!– background 可以为分页按钮添加背景色 –>

</template>

<script>

export default {

  name: “Pagination”,

  methods: {

    handleSizeChange(size){

      alert(size); //分页pageSize改变时，触发size-change事件

    },

    handleCurrentChange(page){

      alert(page);//分页currentPage改变时，触发current-change事件

    }

  },

  data() {

    return {

      pageSize:5,//@1->此处为数据单向绑定

      pageSizes:[2,5,10,20,30,40,50],

      currentPage:3,

      pagerCount:9

    };

  },

};

</script>

“`