不使用接口的 limit 控制分页的容量

1.html中v-for 此时的v-for对象并不是在后台获取的数组list,而是计算属性的函数名pageList

<div v-for="item in pageList" :key="item.id" >{{item.title}}</div>

 

2.添加el-pagination

<el-pagination
      layout="prev, pager, next"
      background
      prev-text="上一页"
      next-text="下一页"
      :total= "listNumber" 
      :pager-count="5"
      :page-size="9"
      @current-change="handleCurrentChange"
    >

total: 总条数，如果用后台传来的数据，最好使用数组的长度
pager-count：页码按钮的数量，当总页数超过该值时会折叠
page-size：每页显示条目个数，要和下面计算属性的数值相等
@current-change：当 currentPage 改变时会触发 ，后面的handleCurrentChange是一个方法

3.data中定义

data () {
    return {
      listNumber: 0,
      loading: false,
      otherDialogVisible: false,
      pdfDoc: null,
      pageNum: 1,
      pageNumPending: null,
      currentPage: 1,
      list: []
    }
  }

4.方法
4.1 后台获取

    async getList () {
      this.loading = true
      let params = {
        type: 1
      }
      const res = await decision(params)
      if (res.data.code === 1) {
        this.list = res.data.data
        console.log(this.list)
      } else {
        this.$message({type: 'success', message: res.data.msg})
      }
      this.listNumber = this.list.length
      this.loading = false
    }

4.2 定义handleCurrentChange方法

handleCurrentChange (val) {
      this.currentPage = val
    }

val：点击时的数值

this.currentPage：当前的页码
5.计算属性（最重要）

    pageList () {
      // 9为每页设置数量,ceil()向上取整
      let pages = Math.ceil(this.list.length / 9) // pages=2,共两页
      let newList = []
      for (let i = 0; i < pages; i++) {
        let sonList = []
        // 9为每页设置数量，slice(start,end)，返回一个新的数组，
        // 包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
        sonList = this.list.slice(i * 9, i * 9 + 9)
        // push() 方法可向数组newList的末尾添加一个或多个元素sonList，并返回新的长度。
        newList.push(sonList)
      }
      return newList[this.currentPage - 1]
    }