el-pagination使用

Posted 2020-12-04 zhaotq

  vue+el-pagination分页

  html部分：

<ul>
　　<li class="item" v-for="(item,index) in pageLists" :key="index">
</ul>

<el-pagination
       @current-change="handleCurrentChange"
       :current-page="currentPage"
       :page-size="6"
       layout="total, prev, pager, next"
       :total="listsDataNumber"
></el-pagination>

 

   js部分：

export default{
        data(){
            return{
                total: ‘0‘,
                currentPage: 1,
                listsDataNumber: ‘‘,
                pageLists: ‘‘
            }
        },
        props: {
            lists: Array,
        },
        methods: {
            handleCurrentChange(val) {
                this.pageLists = this.lists.slice((val-1)*6,val*6)
            },
            initPageLists(){
                this.pageLists = this.lists.slice(0,6)
            }
        },
        watch: {
            "lists": function (lists) {
                this.listsDataNumber = lists.length
                this.initPageLists()
            },
        }
    }

 

    其中，lists是父页面传来的值，pageLists是分页后每一个分页里要展示的值，也就是真正要渲染的值。进入子页面时，首先initPageLists初始化第一页的值，然后通过handleCurrentChange()来更新更换分页时要展示的内容。