二次封装el-select实现下拉滚动加载

平时我们做业务需求的时候，可能会遇到非常大量的数据，有时候成百上千条，一般后端都会写一个分页的接口，只要我们请求的时候加上页码参数即可。

但是在使用element-ui的el-select下拉菜单组件中，官方没有提供相应的方法进行多页加载。

这时候我们可以实现一个Vue的自定义指令，每当使用el-select滚动到列表底部的时候就请求下一页数据，来达到下拉滚动加载更多的目的。

实现自定义指令

首先实现一个el-select下拉加载的自定义指令v-loadmore：

// directives.js
import Vue from 'vue'

Vue.directive("loadmore", {
    bind(el, binding, vnode) {
        const SELECTWRAP = el.querySelector(
            ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP.addEventListener("scroll", function () {
            // scrollTop 这里可能因为浏览器缩放存在小数点的情况，导致了滚动到底部时
            // scrollHeight 减去滚动到底部时的scrollTop ，依然大于clientHeight 导致无法请求更多数据
            // 这里将scrollTop向上取整 保证滚到底部时，触发调用
            const CONDITION = this.scrollHeight - Math.ceil(this.scrollTop) <= this.clientHeight;
            // el.scrollTop !== 0 当输入时，如果搜索结果很少，以至于没看到滚动条，那么此时的CONDITION计算结果是true，会执行bind.value()，此时不应该执行，否则搜索结果不匹配
            if (CONDITION && this.scrollTop !== 0) {
                binding.value();
            }
        });
    },
});

代码说明：

document.querySelector：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。

Element.scrollHeight：在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度（只读）

警告：  在使用显示比例缩放的系统上，scrollTop可能会提供一个小数。

Element.scrollTop：获取或设置一个元素的内容垂直滚动的像素数。

Element.clientHeight：读取元素的可见高度（只读）。

如果元素滚动到底，下面等式返回true，没有则返回false。

// scrollTop  这里可能因为浏览器缩放不等于100%时，存在小数点的情况，导致了滚动到底部时
// scrollHeight 减去滚动到底部时的scrollTop ，依然大于clientHeight 导致没有触发加载事件
// 这里将scrollTop向上取整 保证滚到底部时，触发调用

// 此判断不准确： element.scrollHeight - element.scrollTop === element.clientHeight
// 使用下面的判断方式保证任何缩放都能触发：
element.scrollHeight - Math.ceil(element.scrollTop) <= element.clientHeight

在项目中全局注册v-loadmore指令：

// main.js

import directives from './directive.js'
Vue.use(directives)

最后在组件el-select中使用该指令：

<!-- vue.js -->

<template>
    <el-select v-model="selected" v-loadmore="loadMore">
        <el-option
            v-for="option in options"
            :label="option.label"
            :value="option.value"
            :key="option.value"
        ></el-option>
    </el-select>
</template>

<script>
export default {
    data() {
        return {
            selected: "",
            options: [
                {
                    label: "1",
                    value: 1
                },
                // ... 此处省略多个选项
                {
                    label: "到达底部啦",
                    value: 9
                }
            ]
        };
    },
    methods: {
        loadMore() {
            console.log("more")
        }
    }
};

使用效果如下：

从效果图可以看出，每当菜单列表滚动到底部时，指令就会调用传入的loadMore函数，控制台随即打印出 "more"。

注意事项：

• 传入的数组个数必须大于或者等于8个选项时才能让el-select组件出现下拉滚动。
• 列表里不存在滚动时，无法触发传入指令的函数。

进行二次封装

滚动到底部调用函数的指令已经实现了，下面只要调用接口，把获取到下一页的数据拼接到当前的数据中即可。

接下来把el-select进行二次封装，封装成公用的组件之后，传入必要的参数就可以在项目中调用。

首先新建一个文件load-select.vue：

<!-- load-select.vue -->

<template>
    <el-select :value="value" v-loadmore="loadMore" @focus="focus" v-bind="$attrs" v-on="$listeners">
        <el-option
            v-for="option in data"
            :label="option[dictLabel]"
            :value="option[dictValue]"
            :key="option.value"
        ></el-option>
    </el-select>
</template>

<script>
export default {
    props: {
        value: {
            type: String,
            default: ""
        },
        // 列表数据
        data: {
            type: Array,
            default: () => []
        },
        dictLabel: {
            type: String,
            default: "label"
        },
        dictValue: {
            type: String,
            default: "value"
        },
        // 调用页数的接口
        request: {
            type: Function,
            default: () => {}
        },
        page: {
            type: [Number, String],
            default: 1
        }
    },
    data() {
        return {};
    },
    methods: {
        // 请求下一页的数据
        loadMore() {
            this.request({ page: this.page + 1 })
        },
        // 选中下拉框没有数据时，自动请求第一页的数据
        focus() {
            if (!this.data.length) {
                this.request({page: 1})
            }
        }
    }
};
</script>

在页面组件中调用load-select.vue：

<!-- page.vue -->

<template>
    <div class="xxx-page">
        <load-select v-model="selected" :data="data" :page="page" :request="getData"></load-select>
    </div>
</template>

<script>
// 导入该组件
import loadSelect from "@/components/load-select/index";

export default {
    name: "app",
    components: {
        loadSelect
    },
    data() {
        return {
            selected: "",
            page: 1,
            more: true,
            data: []
        };
    },
    methods: {
        // 传入给load-select组件的函数
        getData({ page = 1 } = {}) {
            // 输出页数
            console.log(page)
            // 访问后端接口API
            this.requestAPI({ page }).then(res => {
                this.data = [...this.data, ...res.result]
                this.page = res.page
            });
        },
        // 模拟后端接口的API
        requestAPI({ page = 1, size = 10 } = {}) {
            return new Promise(resolve => {
                let responseData = []
                // 假设总共的数据有50条
                let total = 50; 
                for (let index = 1; index <= size; index++) {
                    // serial：处于第几个元素，就显示多少序号
                    let serial = index + (page - 1) * size
                    if (serial <= 50) {
                        responseData.push({
                            label: serial,
                            value: serial
                        });
                    }
                }
                // 模拟异步请求，500ms之后返回接口的数据
                setTimeout(() => {
                    resolve({
                        total,
                        page,
                        size,
                        result: responseData
                    });
                }, 500);
            });
        }
    }
};
</script>

代码解析：

首次点击下拉框时，会触发focus事件请求第一页的数据，之后只要每次滚动列表到底部，就会自动请求下一页的数据然后拼接到当前的数组中。

我们来看看效果：

完美！但是在实际使用的过程中，可能会因为接口还来不及返回数据，然后列表又向下滚动再次触发了请求，结果就是返回了两份相同的数据。

现在把接口的延迟调到2000ms重现这个场景：

在两次快速滚动到底部的时候，请求的参数页数都是2，如何解决这个问题？可以在加载函数中加入一个拦截操作，在接口没有响应之前，不调用加载函数，不过这样做要把getData转换成异步函数的形式。

首先在load-select.vue中的loadMore()中加入一个拦截操作：

<!-- load-select.vue -->

<template>
    ...
</template>

<script>
    // 请求下一页的数据
    methods: {
        loadMore() {
            // 如果 intercept 属性为 true 则不请求数据
            if (this.loadMore.intercept) {
                return 
            }
            this.loadMore.intercept = true
            this.request({ page: this.page + 1 }).then(() => {
                // 接口响应之后才把 intercept 设置为 false
                this.loadMore.intercept = false
            })
        }
    }
</script>

然后在page.vue中的getData()函数转换成异步函数的形式：

<!-- page.vue -->

<template>
    ...
</template>

<script>
    methods: {
        // 传入给load-select组件的函数
        getData({ page = 1 } = {}) {
            // 返回 Promise 对象
            return new Promise( resolve => {
                // 访问后端接口API
                this.requestAPI({ page }).then(res => {
                    this.data = [...this.data, ...res.result]
                    this.page = res.page
                    resolve()
                });
            })
        }, 
    
    }
</script>

现在问题来了：

• 一般分页的接口都支持关键字的搜索，load-select.vue组件能不能加入关键字搜索的功能呢？

关键字搜索功能

还好el-select组件支持远程搜索功能，只要传入filterable和remote参数，具体的可以查看element-ui的官方文档。

接下来对load-select.vue进行以下修改：

<!-- load-select.vue -->

<template>
    <el-select
        :value="value"
        v-loadmore="loadMore"
        @focus="focus"
        filterable
        remote
        :filter-method="handleSearch"
        :loading="loading"
        clearable
        v-bind="$attrs"
        v-on="$listeners"
    >
        <el-option
            v-for="option in data"
            :label="option[dictLabel]"
            :value="option[dictValue]"
            :key="option.value"
        ></el-option>
        <!-- 此处加载中的value可以随便设置，只要不与其他数据重复即可 -->
        <el-option v-if="hasMore" disabled label="加载中..." value="-1"></el-option>
    </el-select>
</template>

<script>
export default {
    props: {
        value: {
            default: ""
        },
        // 列表数据
        data: {
            type: Array,
            default: () => []
        },
        dictLabel: {
            type: String,
            default: "label"
        },
        dictValue: {
            type: String,
            default: "value"
        },
        // 调用页数的接口
        request: {
            type: Function,
            default: () => {}
        },
        // 传入的页码
        page: {
            type: [Number, String],
            default: 1
        },
        // 是否还有更多数据
        hasMore: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            // 存储关键字用
            keyword: "", 
            loading: false
        };
    },
    methods: {
        // 请求下一页的数据
        loadMore() {
            // 如果没有更多数据，则不请求
            if (!this.hasMore) {
                return
            }
            // 如果intercept属性为true则不请求数据，
            if (this.loadMore.intercept) {
                return
            }
            this.loadMore.intercept = true;
            this.request({
                page: this.page + 1,
                more: true,
                keyword: this.keyword
            }).then(() => {
                this.loadMore.intercept = false
            });
        },
        // 选中下拉框没有数据时，自动请求第一页的数据
        focus() {
            if (!this.data.length) {
                this.request({ page: 1 })
            }
        },
        // 关键字搜索
        handleSearch(keyword) {
            this.keyword = keyword
            this.loading = true
            this.request({ page: 1, keyword }).then(() => {
                this.loading = false
            });
        },
        // 删除选中时，如果请求了关键字，则清除关键字再请求第一页的数据
        clear() {
            if (this.keyword) {
                this.keyword = ""
                this.request({ page: 1 })
            }
        }
    }
};
</script>

页面调用时，getData()请求函数需要接收keyword和more参数并进行相应的处理：

<!-- page.vue -->

<template>
    <div class="xxx-page">
        <load-select v-model="selected" :data="data" :page="page" :hasMore="more" :request="getData"></load-select>
    </div>
</template>

<script>
// 导入该组件
import loadSelect from "@/components/load-select/index";

export default {
    name: "app",
    components: {
        loadSelect
    },
    data() {
        return {
            selected: "",
            page: 1,
            more: true,
            data: []
        };
    },
    methods: {
        // 传入给load-select组件的函数
        getData({ page = 1, more = false, keyword = "" } = {}) {
            return new Promise(resolve => {
                // 访问后端接口API
                this.requestAPI({ page, keyword }).then(res => {
                    // 如果是加载更多，则合并之前的数据
                    if (more) {
                        this.data = [...this.data, ...res.result]
                    } else {
                        this.data = res.result
                    }

                    this.page = res.page;
                    let { total, page, size } = res
                    // 如果为最后一页，则设置more为false
                    this.more = page * size < total
                    this.page = page
                    resolve()
                });
            });
        },
        // 模拟后端接口的API
        requestAPI({ page = 1, size = 10, keyword = "" } = {}) {
            return new Promise(resolve => {
                // 如果有 keyword 参数，则返回带有 keyword 的数据
                if (keyword) {
                    setTimeout(() => {
                        resolve({
                            total: 3,
                            page: 1,
                            size: 10,
                            result: [
                                {
                                    label: keyword,
                                    value: 1
                                },
                                {
                                    label: keyword + 1,
                                    value: 2
                                },
                                {
                                    label: keyword + 2,
                                    value: 3
                                }
                            ]
                        })
                    }, 500)
                    return
                }

                let responseData = [];
                // 假设总共的数据有50条
                let total = 50; 
                for (let index = 1; index <= size; index++) {
                    // serial：处于第几个元素，就显示多少序号
                    let serial = index + (page - 1) * size
                    if (serial <= 50) {
                        responseData.push({
                            label: serial,
                            value: serial
                        });
                    }
                }
                setTimeout(() => {
                    resolve({
                        total,
                        page,
                        size,
                        result: responseData
                    })
                }, 500)
            })
        }
    }
};
</script>

接下来看看搜索关键字的效果：

搜索功能也完成啦！

总结

为了适用于大部分的请求接口，因此在设计这个组件的时候只能把请求与组件剥离开来，易用程度不算太高，不过我们可以适当地传入一些简单必要的参数去维持基本地使用。

当然，在项目中遇到某些固定的加载请求时，我们也可以对该组件进行再次封装，具体可以根据自身的业务需求进行修改。

本文实属抛砖引玉，如果各位大佬有更好的方法和思路，也可以在这个github项目下提issue，我会在文章的底部post出github地址，当然我也会持续优化这个项目。

github项目地址：vue-load-select