el-table-infinite-scroll实现Element表格数据无限加载

el-table-infinite-scroll插件

• 基于el-table-infinite-scroll插件, 实现ElementUI中table组件的数据加载无限滚动
• 当查询数据较大, Vue的双向绑定, 监听会造成短暂的卡顿

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

"el-table-infinite-scroll": "^1.0.10",
1
2
3
4

Vue项目使用

单个页面配置使用

// 引入插件
import elTableInfiniteScroll from 'el-table-infinite-scroll'

// 注册组件信息
export default {
  directives: {
    'el-table-infinite-scroll': elTableInfiniteScroll
  },
    
  data() {
    return {
      tableDatas: [], //存储初始化部分数据源, 即当前渲染的数据

      tableData: [], //存储初始化所以数据源
      disabled: false,

    };
  },
}    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 <!-- 主要实现代码
		 v-el-table-infinite-scroll="getList" :infinite-scroll-distance="50" :infinite-scroll-disabled="disabled" 
-->

<el-table  v-el-table-infinite-scroll="getList" :infinite-scroll-distance="50" :infinite-scroll-disabled="disabled" v-loading="isloading.mainTable" :data="tableDatas" ref="singletable" clearSelection :cell-style="{padding:0+'px'}" height="100%" style="width:100%;margin-bottom:10px" >
            <el-table-column label="" type="index" width="50" align="left" fixed/>
</el-table>              
1
2
3
4
5
6
7
8

• 实现方法

	// 初始化查询    
    //分页查询数据
    selectMain() {
      const oparm = { };
      this.isloading.mainTable = true;
      selectQuaFqInspectionList(oparm).then((data) => {
        this.tableData = data.data.data ? data.data.data : [];
        this.tableDatas = this.tableData.slice(0, 30);
        this.disabled = false;
        this.PageInfo.total = data.data.count;
        this.isloading.mainTable = false;
      });
    },



	getList() {
      if (this.disabled) return;

      if (this.tableDatas.length < this.tableData.length) {
        this.tableDatas = this.tableData.slice(0, this.tableDatas.length + 5)
      }

      if (this.tableDatas.length == this.tableData.length) {
        this.disabled = true;
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

配置公共组件

// 直接在main.js 文件中引入, 各页面调用

// 无限滚动
import elTableInfiniteScroll from 'el-table-infinite-scroll';
Vue.use(elTableInfiniteScroll);


1
2
3
4
5
6
7