给el-table或给el-select添加懒加载

发布时间 2023-04-23 15:59:07作者: 好大的虫子

1、在组件上写上自定义事件的名称

 v-el-table-tableLazy="tableLazy" 或 v-el-select-selectLazy="selectLazy"
2、在export default 内上自定义事件指令
directives: {
        "el-select-selectLazy": {
            bind(el, binding) {
                let SELECT_DOM = el.querySelector(
                    ".el-select-dropdown .el-select-dropdown__wrap"
                )
                SELECT_DOM.addEventListener("scroll", function () {
                    let condition =
                        this.scrollHeight - this.scrollTop <= this.clientHeight
                    if (condition) {
                        binding.value()
                    }
                })
            },
        },
        "el-table-tableLazy": {
            bind(el, binding) {
                let SELECT_DOM = el.querySelector(
                    ".el-table__body-wrapper"
                )
                SELECT_DOM.addEventListener("scroll", function () {
                    let condition =
                        this.scrollHeight - this.scrollTop <= this.clientHeight
                    if (condition) {
                        binding.value()
                    }
                })
            },
        },
    },
3、在methods里面写上事件调用
     tableLazy() {
            if (this.total == this.historyList.length) {
                this.historyListSum = false
            } else {
                this.page.currentPage++
                this.getHistoryList()
            }
        },

        // 下拉框懒加载
        selectLazy() {
            if (this.equipmentTotal == this.equipmentList.length) {
                return
            } else {
                this.equipmentPage.currentPage++
                this.getListData()
            }
        },