table數據多的時候打開頁面會加載一會才顯示數據，這樣體驗不好，所以要做滾動加載數據

{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].sn}}

{{eventMap[scope.row.eventId] == null ? '--': eventMap[scope.row.eventId].title}}

{{eventMap == null || eventMap[scope.row.eventId] == null || eventMap[scope.row.eventId].personalInformation == null ? '--':

eventMap[scope.row.eventId].personalInformation.name}}

{{materirlName}}

{{formatType(scope.row.type)}}

{{formatUseNum(scope.row.useNum)}}

{{changeTime(scope.row.createOn)}}

下面是js部分

methods: {

init (param) {

let id = param.param && param.param.id

if(id){

this.start = 0

MaterialRecordService.query({param: {baseId: this.baseId, materialId: id},start: this.start,limit: 30}).then(rsp => {//初次請求數據，30條

this.start += 30

this.materielList = rsp.data

MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => {

this.eventMap = {}

rsp3.data.forEach(n => (this.eventMap[n.id] = n))

})

})

}

},

onScroll() {

let inner = document.querySelector('.el-table__body-wrapper');

if(inner.scrollHeight - inner.scrollTop <= inner.clientHeight){//為true時證明已經到底，可以請求接口

if(this.flag){//設一個滾動事件的開關，(在data里面聲明 flag: true)默認為true

this.flag = false

MaterialRecordService.query({param: {baseId: this.baseId, materialId: this.entity.id},start: this.start,limit:30}).then(rsp => {//每次加載30條

this.materielList = this.materielList.concat(rsp.data)

this.start += 30

this.flag = true

MissionEventService.microList({ids: rsp.data.map(n => n.eventId)}).then(rsp3 => {

rsp3.data.forEach(n => (this.eventMap[n.id] = n))

})

})

}

}

}

},

mounted () {

this.init({...this.param})

//監聽表格dom對象的滾動事件

document.querySelector('.el-table__body-wrapper').addEventListener('scroll', this.onScroll);

}

在這里我要說明一下監聽的dom對象是哪一個

我還要解釋下scrollHeight、scrollTop、clientHeight這三個屬性

這是我截的別人的圖加了幾筆

scrollHeight：網頁正文全文高度，

scrollTop：網頁滾動的高度，

clientHeight：網頁可視區域的高度

總結

以上是生活随笔為你收集整理的vue 实现数据滚动显示_vue 滚动加载数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。