使用后台的limit 控制每页的容量

Posted 2021-01-27 qiuligao

和上一个不使用limit的不同，如果不使用后台的限制，那么就必须自己定义一个计算属性，并且v-for这个计算的数组，而如果要用到后台的限制，那么就不需要自己计算，v-for的直接就是后台获取的数组

1.v-for  （list为后台获取的）

<div v-for="item in list" :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="3"
      @current-change="changePage"
    >

3.定义几个属性

      listNumber: 0,
      loading: false,
      otherDialogVisible: false,
      pageNum: 1,
      pageNumber: 0,
      list: []

4.从后台获取数据，并且利用数据定义页码 （别忘记在mounted 里注明开始获取的时间）

    async getList () {
      this.loading = true
      let params = {
        type: 1,
        limit: 3,
        page: this.page
      }
      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})
      }
      let params2 = { //再定义一个是因为上文的params有limit属性，导致params的长度并非原有的长度，而是limit的长度
        type: 1
      }
      const res2 = await decision(params2)
      this.listNumber = res2.data.data.length
      this.pageNumber = Math.ceil(res2.data.data.length / params.limit)
      this.loading = false
    }

5.定义翻页的方法

changePage (e) {
      this.page = e
      this.getList()
    }