element的el-table触底加载更多的实现

项目中触底加载更多
el-table-infinite-scroll - npm (npmjs.com)

import ElTableInfiniteScroll from "el-table-infinite-scroll";

<el-table
    ref="multipleTable"
    :data="allGoodList"
    tooltip-effect="dark"
    style="width: 100%"
    height="450px"
    row-key="id"
    v-el-table-infinite-scroll="loadMore"
    :infinite-scroll-disabled="disabled"
    v-loading="tableLoading"
    @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :reserve-selection="true">
        </el-table-column>
        <el-table-column label="商品名称" prop="goodsName">
        </el-table-column>
</el-table>

data() {
    return {
        disabled: false,
        tableLoading: false,
    }
}

// 监听表格滚动
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()//执行在使用时绑定的函数，在这里即loadMorePerson方法
        //             }
        //         });
        //     },
        // },
//插件的方法
        "el-table-infinite-scroll": ElTableInfiniteScroll,
},

loadMore() {
    if (this.disabled) return;
        if ((this.pageInfo.pageIndex + 1) * this.pageInfo.pageSize < this.pageInfo.total) {
            this.pageInfo.pageIndex += 1;
            this.$nextTick(() => {
                this.getGoodsList();
            });
        } else {
            this.disabled = true;
        }
}