业务场景:项目基于element UI 15.6版本在 el-table 表格中,一个有着700条的数据,加载时间很慢,不能使用分页,实现滚动时按动态加载数据;
需求分析:结合 el-table 表格 和 InfiniteScroll 无限滚动组件,初始化表格加载可见区域内的数据,通过监听虚拟列表滚动的位置,动态改变请求翻页参数,从而达到动态加载的效果。
功能实现:
<template>
<el-input v-model="searchParam.id" clearable :title="searchParam.id" />
<el-input v-model="searchParam.name" clearable :title="searchParam.name" />
<el-table :data="taskData" v-loading="taskLoading" v-el-table-infinite-scroll="toLoadMore"
infinite-scroll-disabled="scrollDisabled" infinite-scroll-immediate="false">
<el-table-column label="id" prop="ID" show-overflow-tooltip />
<el-table-column label="name" prop="Name" show-overflow-tooltip />
<el-table-column label="sex" prop="Sex" show-overflow-tooltip />
<el-table-column label="age" prop="Age" show-overflow-tooltip />
</el-table>
</template>
<script>
import elTableInfiniteScroll from 'el-table-infinite-scroll';
export default {
directives: {
'el-table-infinite-scroll': elTableInfiniteScroll
},
data() {
return {
taskData: [],
taskLoading: false,
scrollDisabled: false,
searchParam: {
page_size: 10,
page_no: 1
},
}
},
created() {
this.toGetList();
},
methods: {
toGetList() {
this.searchParam.page_no = 1; // 初始化 搜索条件 页码
const param = {};
Object.keys(this.searchParam).forEach((item) => {
if (this.searchParam[item] || this.searchParam[item] === 0) {
param[item] = this.searchParam[item];
}
});
this.scrollDisabled = true;
this.taskData = []; // 搜索前清空滚动加载获取的数据,避免内容重复
this.loadList(param);
},
toLoadMore() {
// 监听表格滚动事件
this.searchParam.page_no++;
const param = {};
Object.keys(this.searchParam).forEach((item) => {
if (this.searchParam[item] || this.searchParam[item] === 0) {
param[item] = this.searchParam[item];
}
});
this.loadList(param);
},
loadList(param) {
this.taskLoading = true;
getList(param).then((res) => {
this.taskLoading = false;
// 没数据的时候,禁用 infinite-scroll-disabled 滚动事件
if (res.length === 0) return (this.scrollDisabled = true);
this.scrollDisabled = false;
this.taskData.push(...res); // 分页请求的数据,追加到任务列表中
});
},
}
}
</script>