element plus table配合无限滚动加载

程序媛_panpan

已于 2023-08-01 14:51:34 修改

阅读量1.1k

点赞数

文章标签： vue.js elementui 前端

于 2023-07-20 16:09:48 首次发布

本文链接：https://blog.csdn.net/weixin_46186815/article/details/131832886

版权

文章展示了如何在Vue项目中安装和使用el-table-infinite-scroll插件实现无限滚动加载数据。首先通过npm安装插件，然后在组件中局部引用并定义指令。在JavaScript中设置加载更多数据的逻辑，同时从API获取数据并进行分页处理。HTML部分展示了el-table的配置，包括加载事件和分页参数。

摘要由CSDN通过智能技术生成

1、安装插件

npm install --save el-table-infinite-scroll

2、局部引用

import elTableInfiniteScroll from 'el-table-infinite-scroll';

3、js

  directives: {
      'el-table-infinite-scroll': elTableInfiniteScroll,
    },
    setup() {}

    //加载更多
      const loadResult = () => {
        if (state.count < state.resultListTotal.length) {
          state.count += 5
        } else {
          state.count = state.resultListTotal.length
          state.isLoad = true
        }

        state.resultList = state.resultListTotal.slice(0, state.count)
      }
      //获取发票批及配单结果
      const matchInvoiceBatchFun = async () => {
        try {
          state.resultLoading = true
          const data = await $matchInvoiceBatch({
            id: route.query.id,
            flag: 'CMS',
          })

          state.resultLoading = false
          state.batchForm = data.data
          state.invoiceBatchId = data.data.id
          state.resultListTotal = data.data.invoiceBatchMatchResult
          state.resultList = state.resultListTotal.slice(0, 5)
          state.expandRowKeys = []
          state.resultListTotal?.forEach((i) => {
            state.expandRowKeys.push(i.invoiceId)
          })

          state.invoiceHeaderData = JSON.parse(
            sessionStorage.getItem('invoiceHeaderData')
          )
        } catch (error) {
          state.resultLoading = false
        }
      }

4、html

     <el-table
          ref="tableSortRef"
          v-loading="resultLoading"
          :border="border"
          :cell-class-name="orderRowClassName3"
          class-name="resultTableAll"
          :data="resultList"
      
          @selection-change="resultSelectChange"
          class="infinite-list"
          v-el-table-infinite-scroll="loadResult"
          :infinite-scroll-disabled="isLoad"
          :infinite-scroll-immediate="isLoad"
        >
          <el-table-column align="center" type="selection" width="30" />