element ui 列表分页加载更多

需求：一进入页面立即加载左侧 标准字典 分页，并且选中第1条数据，同时在右则的表格展示出来，然后通过滚动条来加载更多。

因代码太多，我这里主要展示左侧的分页加载，右侧的都是通常代码。

<!-- 左边列表 begin-->
      <div class="left" v-loading="isLoading">
        <div class="left-search">
          <el-input
            v-model="leftSearch"
            placeholder="请输入字典名称或拼音码"
            clearable
            class="left-input"></el-input>
          <el-button
            type="primary"
            size="small"
            class="left-btn"
            @click="onLeftSearch(true)">搜索</el-button>
        </div>
        <p class="left-list">标准字典</p>
        <ul class="consult-list"
          v-infinite-scroll="() => onLeftSearch(false)"
          :infinite-scroll-disabled="isLoading || noMoreData">
          <li class="left-item"
            v-for="(item,index) in leftDictionaryList"
            :key="index"
            :class="active == item.dm ? 'activeClass' : ''" // 当前选中某项样式
            @click="onItemDictionary(item)">{{item.mc}}</li>
          <p class="prompt" v-if="noMoreData">没有更多了</p>
        </ul>
      </div>
      <!-- 左边列表 end-->

• html结构里没有写 Pagination 分页，是因为我这里不需要用到，这里是通过滚动条来加载更多。

data(){
  return{
    leftSearch: '',
    loading: false,
    active: 0, // 样式
    leftDictionaryList: [], // 字典列表
    leftpagination: { // 左侧分页
        pageNo: 1,
        pageSize: 20,
        total: 0
      },
    curDic: '', // 当前选中字典id
    curMc: '', // 当前选中字典名称
  }
},
computed:{
  noMoreData () {
    return this.leftpagination.pageNo * this.leftpagination.pageSize >= this.leftpagination.total
  }
},
async created(){
  await this.onLeftSearch(true)
  await this.onItemDictionary(this.leftDictionaryList[0])
},
methods:{
  // 左边搜索/列表
    async onLeftSearch(reset) {
      let pageNo
      if (reset) {
        pageNo = 1
      } else {
        if (this.leftpagination.pageNo * this.leftpagination.pageSize >= this.leftpagination.total) return
        pageNo = this.leftpagination.pageNo + 1
      }
      this.leftpagination.pageNo = pageNo
      this.isLoading = true

      const params = {
        SearchValue: this.leftSearch,
        pageSize: this.leftpagination.pageSize,
        pageNo
      }
      try {
        const res = await this.$request.get('/api/xxx', { params })
        if (reset) {
          this.leftDictionaryList = res.rows
        } else {
          this.leftDictionaryList = this.leftDictionaryList.concat(res.rows)
        }
        this.leftpagination.total = res.totalRows
      } catch (err) {
        this.leftDictionaryList = []
        this.leftpagination.total = 0
      } finally {
        this.isLoading = false
      }
    },
  // 左侧单选字典(点击某项展示)
    onItemDictionary(item) {
      if (!item) {
        return
      }
      this.loading = true
      this.curDic = item.dm
      this.curMc = item.mc
      this.active = item.dm // 当前选中项高亮

      const params = {
        FlDM: this.curDic,
        SearchValue: this.rightSearch,
        pageSize: this.pagination.pageSize,
        pageNo: this.pagination.pageNum
      }
      this.$request.get('/api/xxx', { params }).then(res => {
        this.tableData = res.rows
        this.pagination.total = res.totalRows
      }).finally(() => {
        this.loading = false
      })
    },
  
}

.activeClass {
  color: #409eff;
}