参考网上的el-select下拉框下拉分页,使用自定义指令方式实现table的下拉分页
Vue.directive('loadMoreTable', {
inserted(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelectorAll('.el-table__body-wrapper')[0]
SELECTWRAP_DOM.addEventListener('scroll', debounce(function() {
const CONDITION = parseInt(this.scrollHeight - this.scrollTop) <= this.clientHeight
if (CONDITION) {
binding.value()
}
}, 100))
}
})
debounce.js
export function debounce(func, delay) {
let timer = null;
return function (...args) {
if (timer) { clearTimeout(timer) }
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
};
引用
<el-table :data="tableData" border highlight-current-row height="360" style="width: 100%" v-loadMoreTable="loadMore">
<el-table-column type="index" label="行号" width="180">
</el-table-column>
<el-table-column prop="code" label="编码" width="180">
</el-table-column>
<el-table-column prop="name" label="名称">
</el-table-column>
</el-table>
loadMore方法
loadMore(){
if (this.pageNo < this.totalPage) {
this.pageNo++;
this.getDiseasesChina();
}
}