分页，点击加载更多

<div v-if="isHadMessage">
  暂无消息
</div>
<div v-else>
  <div v-if="isLoading" @click="loadMore">
    点击加载更多......
  </div>
</div>

// 接口引入
import CaseSearch from '@/api/system/caseSearch.js'

data(){
  return{
    // 用于存放通过接口获取的后端数据
    tableData: [],
    // 当前页面
    current: 1,
    // 页面消息条数
    size: 10,
    // 消息总页数
    total: 1,
    // 消息总条数
    all: ''
    // 是否存在消息
    isHadMessage: false,
    // 点击加载更多
    isLoading: true
  }
} 

mounted(){
  this.pagindLoad()
}

methods: {
  pagindLoad(){
     // 将当前页数和页面消息条数发给后端
     let params = {
       size: this.size,
       current: this.current
     }
     //调用接口
     CaseSearch.message(params).then(res=>{
       // 如果不存在消息，显示暂无消息
       // res.data.all 后端传过来的总消息条数
       if(res.data.all === 0){
         this.isHadMessage = false
       }else{
         // 如果已经获取到的消息条数小于消息总条数，获取剩余的消息并且拼接到tableData中
         // 这里不能写出 <= ，如果加上 = ，数据全部请求完毕后，会多请求一次
         if(this.tableData.length < res.data.all){
           // res.data.total由你传过去的size决定
           this.total = res.data.total
           // res.data.data为从后端获取的一页数据，由你传过去的siez和current决定
           // 将获取到的数据拼接到tableData中
           this.tableData = this.tableData.concat(res.data.data)
           // 如果数据获取完毕
           if(this.tableData.length === res.data.all){
             this.isLoading = false
           }
         }
       }
     })
  },
  loadMore(){
    this.current++
    this.pagindLoad()
  }
}