<el-table
ref="treeTable"
:data="綁定數(shù)據(jù)"
:expand-row-keys="expands"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
:default-expand-all="true"
height="500" // 表單設(shè)置高度
: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', () => {
// 滾動(dòng)距離
const scrollTop = this.dom.scrollTop;
// 變量windowHeight是可視區(qū)的高度
const windowHeight = this.dom.clientHeight || this.dom.clientHeight;
// 變量scrollHeight是滾動(dòng)條的總高度
const scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight;
if ((scrollTop + windowHeight + 1) >= scrollHeight) {
console.log(scrollTop + windowHeight, 'scrollTop + windowHeight + 1', scrollHeight);
// 獲取到的不是全部數(shù)據(jù) 當(dāng)滾動(dòng)到底部 繼續(xù)獲取新的數(shù)據(jù)
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 || [];
})
}
