为 el-select 组件添加滚动加载更多的功能

转载请注明出处,点击此处 查看更多精彩内容

el-select 是 element-ui 组件库提供的下拉选择菜单组件。

在项目中,我们展示到 el-select 的数据通常是从服务端获取的,如果服务端的查询较慢或者数据量过大,就会导致在前端的显示很慢,特别是在网络不好的时候更是如此。

所以,分页展示就是一种较好的交互体验了,可惜的是 el-select 组件并没有提供分页的功能。

本着不重复造轮子(懒)的原则,在网上逛了一圈,发现现有实现方案基本都是基于 el-select 封装了新的组件,这可能导致 el-select 组件的部分功能不可用,并且不是很灵活。

算啦,动手做一个吧。

实现效果

为 el-select 组件添加滚动加载更多的功能_第1张图片

实现思路

  • 自定义一个组件 ElSelectLoading.vue,由用户自行插入到 el-select 组件菜单的底部。
  • 使用 IntersectionObserver 监听当前组件是否出现在可见范围,可见时触发加载数据的事件。
  • 用户监听事件加载新数据,对 el-select 的功能没有影响。

这个思路也适用于其他的列表监听滚动触底加载更多数据。

实现代码


<template>
  <el-option ref="el" class="el-select-loading" value="">
    <template v-if="hasMore">
      <el-icon class="el-select-loading__icon"><Loading />el-icon>
      <span class="el-select-loading__tips">{{ loadingText || "正在加载" }}span>
    template>
    <template v-else>{{ noMoreText || "到底了~" }}template>
  el-option>
template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { ElOption } from "element-plus";

interface Props {
  // 当前页码
  page: number;
  // 是否加载中,用来过滤重复的加载
  loading: boolean;
  // 加载中的提示文案
  loadingText?: string;
  // 是否有更多数据可加载
  hasMore: boolean;
  // 没有更多数据的提示文案
  noMoreText?: string;
}

const props = defineProps<Props>();

interface Emits {
  (event: "loadMore", data: number): any;
}

const emit = defineEmits<Emits>();

const el = ref<typeof ElOption>();
const observer = ref<IntersectionObserver>();

// 组件加载成功,监听滚动
onMounted(() => {
  if (!el.value) {
    return;
  }
  const callback: IntersectionObserverCallback = (entries) => {
    if (props.loading || !props.hasMore || !entries[0].isIntersecting) {
      return;
    }
    emit("loadMore", props.page + 1);
  };
  const options: IntersectionObserverInit = {
    root: el.value.$el.parentElement?.parentElement,
    rootMargin: "0px 0px 0px 0px",
  };
  observer.value = new IntersectionObserver(callback, options);
  observer.value.observe(el.value.$el);
});

// 组件卸载成功,取消滚动监听
onUnmounted(() => {
  if (!el.value) {
    return;
  }
  observer.value?.unobserve(el.value.$el);
});
script>

<style lang="scss" scoped>
.el-select-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: initial;
  pointer-events: none;
  color: var(--el-color-info);
  font-size: 12px;

  &__icon {
    font-size: 16px;
    animation: rotate 1.5s linear infinite;
  }

  &__tips {
    margin-left: 6px;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
style>

为什么根组件使用 el-option 而不是 div 或其他标签?
这是因为 el-select 在内部没有任何 el-option 的时候不会渲染菜单浮层,如果使用 div,组件可能会没有机会渲染。

Props:

参数名称 说明 类型 默认值
page 当前页码 number -
loading 是否加载中,用来过滤重复的加载 boolean -
loadingText 加载中的提示文案 string 正在加载
hasMore 是否有更多数据可加载 boolean -
noMoreText 没有更多数据的提示文案 string 到底了~

Emits:

事件名称 说明 回调参数
loadMore 触底可加载数据时触发 (newPage: number)

使用示例

<template>
  <el-select placeholder="请选择" v-model="selectValue">
    <el-option
      v-for="item in selectOptions"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
    <ElSelectLoading
      :page="page"
      :loading="loading"
      :hasMore="hasMore"
      @loadMore="handleLoadMore"
    />
  el-select>
template>

<script setup lang="ts">
import { ref } from "vue";
import ElSelectLoading from "@/components/ElSelectLoading.vue";

const page = ref(0);
const loading = ref(false);
const hasMore = ref(true);

const selectValue = ref<number>();
const selectOptions = ref<any[]>([]);

/**
 * 加载数据列表
 */
const loadDataList = async (newPage: number) => {
  try {
    loading.value = true;
    const res = await pageRequest();
    const list = res.data.list || [];
    if (newPage === 1) {
      selectOptions.value = [];
    }
    selectOptions.value.push(...list);
    hasMore.value = selectOptions.value.length < res.data.total;
    page.value = newPage;
  } catch (err) {
    console.error(err);
  } finally {
    loading.value = false;
  }
};

/**
 * 加载更多数据
 */
const handleLoadMore = async (newPage: number) => {
  await loadDataList(newPage);
};
script>

<style lang="scss" scoped>style>

观察代码可以发现,在菜单底部插入了 ElSelectLoading 组件,并在加载数据时更新对应的状态。

注意: 每次 loadMore 事件回调的新页码参数都是由组件 props.page + 1 得到的,因此,

  1. page 参数的值应该由 0 开始。
  2. page.value 的更新应该放在数据加载成功后,以防加载失败后重新加载时页码错误。

如果项目中有多个功能需要分页加载,也可以自行基于 el-select 和 ElSelectLoading 做封装。

分页时数据回显问题的解决方案

默认情况下要回显的数据在菜单里不存在时 el-select 会把 value 展示出来,在分页加载中这种情况是很常见的,对用户很不友好,需要处理一下。

以下方案都建立在回显时已拿到选中项的 valuelabel 值的前提下。

方案一:模拟回显

如果是单选的话,我们可以用 absolute 定位元素覆盖到 el-select 组件上模拟回显 label 值,可以完美回显。

多选的话模拟起来很麻烦,要考虑高度、删除等问题,建议不要用 el-select 组件了,或者看一下方案二吧。

方案二:手动处理数据

根据要回显的 valuelabel 组建一个列表并插入到第一页,后续分页加载时从列表中删除重复数据。

该方案的缺点也很明显:

  1. 回显时会把原本分散的选中数据集中到最前面,有点违反直觉,如果原列表有排序的话,还会导致顺序混乱。
  2. 从后续分页中删除已回显的重复数据后,本页加载到的有效数据量会小于 pagesSize,甚至出现为 0 的情况。

回显方案总结

综上所述,在列表筛选项等不需要回显的场景或者【单选+回显】场景下使用分页加载是比较合适的,【多选+回显】的情况不建议使用 el-select 分页加载,可以考虑用 dialog + table 去做(需要和产品经理 battle 一下),或者去找一找有没有完善的带回显功能的分页下拉菜单组件。

如果大家有好的回显方案,也可以到评论区分享一下。

你可能感兴趣的:(前端,element-ui,el-select,滚动加载更多)