vue项目使用el-table实现无限滚动

https://blog.csdn.net/weixin_44994731/article/details/107980827

1.安装el-table-infinite-scroll

yarn add el-table-infinite-scroll

2.main.js中引入

3.在页面中使用

html代码：

　　　　<el-table v-loading="loading" v-el-table-infinite-scroll="loadData" infinite-scroll-disabled="disabled"
                class="ave-table before-casting-table" border :data="tableData" style=" 100%" height="500">
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column prop="companyName" label="公司名称" width="360">
          <template slot-scope="scope">
            <img src="@/assets/images/oval.png" alt="" class="company-img">
            <el-link @click="openDetail(scope.row.companyId)" type="primary">{{ scope.row.companyName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="industryField" label="行业领域"></el-table-column>
        <el-table-column prop="chargePerson" label="负责人"></el-table-column>
        <el-table-column prop="projectSource" label="项目来源"></el-table-column>
        <el-table-column prop="financingAmount" label="融资金额">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link @click="deleteItem(scope.row)" type="primary">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

js代码：

data () {
    return {
      searchForm: {
        projectName: '',
        dateRange: ''
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      choosedTabList: [],
      visitRecordFlag: { value: false },

      tableData: [],

      beforeCastCode: {},
      beforeCastCodeList: {
        industry_field: [],
        project_phase: [],
        project_manager: []
      },
      tabListSelected: [], // 被选中的字典值

      pageIndex: 0,
      pageSize: 10,
      loading: true,
      disabled: false
    }
 },

// 投前列表接口
    async getbeforeCastList () {
      this.disabled = true
      this.pageIndex++
      const industryFielded = []
      const projectPhased = []
      const projectManagered = []
      this.beforeCastCodeList.industry_field.map(item => {
        if (item.selected) {
          industryFielded.push(item.itemValue)
        }
      })
      this.beforeCastCodeList.project_phase.map(item => {
        if (item.selected) {
          projectPhased.push(item.itemValue)
        }
      })
      this.beforeCastCodeList.project_manager.map(item => {
        if (item.selected) {
          projectManagered.push(item.itemValue)
        }
      })
      const { data } = await this.$http.post('/project/getProjectList', {
        queryPage: {
          currentPage: this.pageIndex,
          pageSize: this.pageSize
        },
        industryFielded: industryFielded || [],
        projectPhased: projectPhased || [],
        projectManagered: projectManagered || []

      })
      const { pageResult, success, code } = data
      if (success !== true || code !== 200) {
        return false
      } else {
        this.disabled = false
        this.loading = false
        if (!pageResult.data || pageResult.data.length < this.pageSize) {
          this.disabled = true
        }
        if (this.pageIndex === 1) {
          this.tableData = pageResult.data
        } else {
          this.tableData = this.tableData.concat(pageResult.data)
        }
      }
    },
    loadData () {
      this.getbeforeCastList()
    },