項目中在表格中用到了無限加載洒沦，可用的實現(xiàn)方法有3種，三種方法各有優(yōu)缺點价淌。
1申眼、使用element的InfiniteScroll 無限滾動
妄想加在表格內(nèi)瞒津，失敗了。加在表格外層括尸，表頭會跟著移動巷蚪，不是特別理想。
https://element.eleme.cn/#/zh-CN/component/infiniteScroll
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="20"
style="height:500px;overflow: auto;"
>
<el-table :data="tableData" >
<el-table-column prop="name" label="名稱"></el-table-column>
</el-table>
<p v-if="tableData.length&&loading" class="list-loading">加載中...</p>
<p v-if="tableData.length&&isEnd" class="list-end">沒有更多了</p>
</div>
2濒翻、監(jiān)聽表格滾動
在main.js中注冊全局事件屁柏，監(jiān)聽表格滾動位置是否到底，觸發(fā)綁定方法有送。
在需要無限加載的表格中綁定事件v-loadmore="loadMore"（表格滑動到底部觸發(fā)loadMore）
http://www.reibang.com/p/4f0142d737a0
Vue.directive('loadmore', {
bind(el, binding) {
var p = 0;
var t = 0;
var down = true;
var selectWrap = el.querySelector('.el-table__body-wrapper')
selectWrap.addEventListener('scroll', function () {
//判斷是否向下滾動
p = this.scrollTop;
if (t < p) {
down = true;
} else {
down = false;
}
t = p;
//判斷是否到底
const sign = 10;
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
if (scrollDistance <= sign && down) {
binding.value()
}
})
}
})
