<el-table
ref="treeTable"
:data="绑定数据"
:expand-row-keys="expands"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
:default-expand-all="true"
height="500" // 表单设置高度
:tree-props="{children: 'childrens', hasChildren: 'hasChildren'}"
>
data() {
return {
formData: {
pageIndex: 1,
pageSize: 20
},
}
}
mounted(){
this.load();
}
load() {
// 获取需要绑定的table
this.dom = this.$refs.treeTable.bodyWrapper;
this.dom.addEventListener('scroll', () => {
// 滚动距离
const scrollTop = this.dom.scrollTop;
// 变量windowHeight是可视区的高度
const windowHeight = this.dom.clientHeight || this.dom.clientHeight;
// 变量scrollHeight是滚动条的总高度
const scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight;
if ((scrollTop + windowHeight + 1) >= scrollHeight) {
console.log(scrollTop + windowHeight, 'scrollTop + windowHeight + 1', scrollHeight);
// 获取到的不是全部数据 当滚动到底部 继续获取新的数据
console.log(this.Data.childrens.length, this.childrensOther.length);
if (this.Data[0].childrens.length != this.childrensOther.length) {
this.getMoreLog();
}
}
});
},
getMoreLog() {
this.formData.pageIndex++;
this.dom.scrollTop = this.dom.scrollTop - 100;
const num = ~~this.formData.pageIndex * ~~this.formData.pageSize;
this.Data[0].childrens = this.childrensOther.slice(0, num);
}
getDetail() {
//api
.then(res => {
// 获取res
this.childrensOther = res.data || [];
})
}