点击加载更多，数据列表分批次加载

         <template v-for="res in this.collectList" >
                      <el-tooltip placement="top"  v-if="res.relicname.length>10">
                        <div slot="content"> {{res.relicname}} &nbsp;{{res.reliccode}}</div>
                        <el-button class="greenbgc" size="small" @click="expendcollect(res)"  >
                          {{(res.relicname +' '+ res.reliccode)|ellipsis}}
                        </el-button>
                      </el-tooltip>

                      <el-button class="greenbgc" size="small" @click="expendcollect(res)" v-else >
                        {{res.relicname}} &nbsp;{{res.reliccode}}
                      </el-button>
                    </template>

                    <div style="text-align: center;text-decoration: underline;padding-top: 10px;font-size: 16px" >
                      <div v-if="showmore">没有更多了</div>
                      <a v-if="!showmore" @click="loadMore" style="cursor:pointer">加载更多</a>
                    </div>

其中包括用ellipsis将长数据过滤为… typescript 语言下需要在component中定义过滤器

@Component({
  name: 'searchResult',
  components: {
    SearchType,
    Fold
  },
  filters:{
    ellipsis(value:any, len=5){
      if (!value) return ''
      if (value.length > len) {
        return value.slice(0, len) + '...'
      }
      return value
    }
  }
})

加载更多代码如下：

 async loadMore() {
    this.collectPageNum=this.collectPageNum+1
    let param = {
      text: this.textres,
      indexType: 'sjzy_relic',
      searchmodule:'quanku',
      pageSize: this.collectPageSize,
      pageNum: this.collectPageNum ,
    }
    await this.searchApi.getRelic(param).then((ref: any) => {
        if (ref.data.code === 0) {
          if(ref.data.data.alldata.length>0){
            this.collectList=this.collectList.concat( ref.data.data.alldata)
          }
          else{
           this.showmore=true
          }

        }
      }
    )
  }

}

每次请求则将当前页码＋1，并将请求完的后台数据与当前显示的数据连接起来，如果请求到当前页没有结果，就不在显示“加载更多”而应该显示“没有更多了”