Element——在el-table上使用无限滚动加载_element-table结合infinitescroll使用

使用了自带的infinite-scroll插件

还遇到了一个坑，在滚动加载时ajax请求被多次重复触发，下面来解决。

一、安装插件

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

二、引入

全局引入

import Vue from 'vue';
import elTableInfiniteScroll from 'el-table-infinite-scroll';
 
Vue.use(elTableInfiniteScroll);

局部引入

<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  }
}
</script>

三、实例使用

解决重复多次发送请求的重点是isflag

template部分

<template>
    <div>
        <el-table
                height="550px"
                :data="tableData"
                v-loading="loading"
                v-el-table-infinite-scroll="load"
                :default-sort="{prop: 'last_report_time', order: 'descending'}">
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    v-if="show"
                    prop="device_id"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="device_no"
                    label="设备编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="dev_type"
                    label="设备类型"
                    width="150"
                    :filters="[{ text: '土壤检测仪', value: '土壤检测仪' }, { text: '环境检测仪', value: '环境检测仪' }]"
                    :filter-method="filterType"
                    filter-placement="bottom-end">
            </el-table-column>
            <el-table-column
                    prop="road_name"
                    label="所属街道"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="设备状态"
                    :filters="[{ text: '正常', value: '正常' }, { text: '故障', value: '故障' }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.status === '正常' ? 'primary' : 'warning'"
                            disable-transition>{{scope.row.status}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="last_report_time"
                    label="最后上报时间"
                    sortable>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.$index, scope.row)">查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-alert v-if="isflag"
                title="正在努力加载中..."
                type="success"
                center
                :closable="false"
                show-icon>
        </el-alert>
        <el-alert v-if="isMore"
                title="没有更多啦！"
                type="warning"
                center
                show-icon>
        </el-alert>
    </div>

methods中的load函数

            load() {
                this.isMore = false;
                this.isflag = true;
                if (this.isflag) {
                    this.getDevices();
                    this.page++;
                }
            }

四、实现效果