Element表格实现触底加载更多数据

<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>