創(chuàng)建自定義指令，命名為loadmore
directives: {
????loadmore: {
????????bind(el, binding) {
????????????const selectWrap = el.querySelector('.el-table__body-wrapper')
????????????selectWrap.addEventListener('scroll', function() {
????????????????let sign = 200;
? ? ? ? ? ? ????const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
????????????????if( this.scrollHeight == this.clientHeight ) return //沒有滾動條
? ? ? ? ? ? ?????if ( scrollDistance <= sign) {
??????????????????????binding.value()
? ? ? ? ? ? ?????}
????????????})
????????}
????}
},
在要滾動的區(qū)域綁定指令
聲明一個布爾值寥掐，默認為true萎坷，即表示可以滾動加載剩膘，滾動加載暫時關閉防止多次滾動一起請求數(shù)據(jù)推穷，如果當前頁加1后大于總頁數(shù)或者當前數(shù)據(jù)只有一頁慧耍，提示已經(jīng)加載完畢并返回既绩，否則的話概龄，設置一個定時器，調(diào)用list饲握，并再次允許滾動
loadMore() {
????if (this.busy) {
????????this.busy = false;
????????this.currentPage++;
????????if(this.currentPage > this.totalPage || this.totalPage == 0){
????????????this.$message.warning('已經(jīng)到底了~')
????????????return
????????}
????????setTimeout(() => {
????????????this.getList()
????????????this.busy = true
????????}, 100)
????}
}
調(diào)用list的時候私杜，由于一次性只請求固定條數(shù)的數(shù)據(jù)，相當于是分頁模式但是把最新請求的數(shù)據(jù)追加到表格中救欧，所以要給table綁定的data重新賦值衰粹，然后渲染showList就可以了
this.showList = this.showList.concat(res.varList)
