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",
Vue项目使用
单个页面配置使用
import elTableInfiniteScroll from 'el-table-infinite-scroll'
export default {
directives: {
'el-table-infinite-scroll': elTableInfiniteScroll
},
data() {
return {
tableDatas: [],
tableData: [],
disabled: false,
};
},
}
<!-- 主要实现代码
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>
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;
}
},
配置公共组件
import elTableInfiniteScroll from 'el-table-infinite-scroll';
Vue.use(elTableInfiniteScroll);