<template>
<el-dialog
title="test"
:visible="showDialog"
center
@close="btnCancle"
width="1060px"
:close-on-click-modal="false"
>
<el-table
header-align="center"
v-loadmore="addData"
:data="myData"
height="500"
style="width: 100%;"
>
<el-table-column prop="name" align="center" label="姓名"> </el-table-column>
</el-table>
</el-dialog>
</template>
<script>
export default {
props: {
showDialog: {
type: Boolean,
default: false,
},
},
data() {
return {
myData: [
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'},
{name: 'aaa'}
]
};
},
directives: {
loadmore: {
bind(el, binding) {
const selectWrap = el.querySelector(".el-table__body-wrapper");
selectWrap.addEventListener("scroll", function () {
const scrollDistance =
this.scrollHeight - this.scrollTop - this.clientHeight;
if (scrollDistance <= 0.5) {
binding.value()//执行在使用时绑定的函数,在这里即addData方法
}
});
},
},
},
methods: {
addData() {
// 自行添加节流
// 自行判断暂无更多数据
this.myData.push(...[{name: 'bbb'},{name: 'bbb'},{name: 'bbb'},{name: 'bbb'},
{name: 'bbb'},{name: 'bbb'},{name: 'bbb'}])
},
btnCancle() {
this.showDialog = false;
},
},
};
</script>
<style lang="scss" scoped></style>
Element表格实现触底加载更多数据
猜你喜欢
转载自blog.csdn.net/m0_52510500/article/details/131900940
今日推荐
周排行