Vue2.x中使用DataV中的轮播表 1. 2. 3. let page

QQ录屏20230519174802

我正在参加「掘金·启航计划」

一、使用过程中遇到的问题

1. 对分页接口进行分部加载（一次调10条知道调完所有数据）

2. 将接口返回的一段一段的数据处理成DataV中轮播表所需要的格式

3. 轮播表数据不更新

二、解决问题

思路：maxResultCount 单次查询的最大条数（随意 int类型）

skipCount 跳过多少条数据查询

判断接口返回的数据res的数组长度来判断是否继续查询，数组长度为0就对数据进行处理，处理完数据后使用拓展运算符更新数据

具体实现看下面代码

getTenantResourcesList() {
      let pages = this.page
      this.skipCount = (pages - 1) * this.size
      this.maxResultCount = this.size

      this.$axios.gets(`/api/base/common/getTenantResourcesList?maxResultCount=${this.maxResultCount}&skipCount=${this.skipCount}`).then((res) => {
        if (res.items.length === 0) {
          let data = []
          this.resDataArray.forEach((item) => {
            data.push([item.tenantName, item.surplusQuantity, item.surplusSize, item.totalQuantity, item.totalSize, item.usedQuantity, item.usedSize]) //公司名称
          })

          this.config.data = data
          this.config = { ...this.config }
          this.resDataArray = []
          this.page = 1
        }

        if (res.items.length !== 0) {
          this.getTenantResourcesList()
          res.items.forEach((element) => {
            this.resDataArray.push(element)
          })
        }

        this.page += 1
      })
    },