zoukankan      html  css  js  c++  java
  • el-pagination使用

      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()来更新更换分页时要展示的内容。

  • 相关阅读:
    数据库完整性约束
    系统介绍
    全栈性能测试修炼宝典--Jmeter实战(一)
    数据驱动(四)
    数据驱动(五)
    数据驱动(三)
    数据驱动(二)
    数据驱动(一)
    Robot Framework 三种测试用例模式
    sublime text---注释
  • 原文地址:https://www.cnblogs.com/zhaotq/p/9307262.html
Copyright © 2011-2022 走看看