导航：首页 > 开发技术 >

Element中如何实现select多数据加载优化

发表于：2024-11-27 作者：千家信息网编辑

千家信息网最后更新 2024年11月27日，这篇文章主要介绍了Element中如何实现select多数据加载优化，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。场景近期着手开发基于

千家信息网最后更新 2024年11月27日Element中如何实现select多数据加载优化

这篇文章主要介绍了Element中如何实现select多数据加载优化，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

场景

近期着手开发基于ElementUI的后台管理系统，偶然间发现「el-select」下拉选择时候遇到一个问题，当渲染下拉选项的「options」的数据量过多时「本项目中的数据条目已过万」，就会出现下拉选择器卡顿的情况，尤其是在模糊匹配过滤的情况下，显得十分的卡顿。初始化选择器的时候，也会点击无反应，有时候需要点击多次才可出现「dialog」弹窗（本次下拉筛选在弹窗中实现）。翻阅多篇博客笔记之后，最终找到一个可以解决问题的方案，现将此次优化方案记录成为笔记，以便于日后遇到类似问题的时候便于查阅。

注：基于select的下拉筛选，通过自定义事件来实现模糊搜索匹配。

一共两种方案：

一是获取所有数据，通过输入的关键字自己对获取的数据进行过滤处理；
二是通过输入的关键字来动态请求后台接口，通过接口返回的数据来动态渲染下拉选项；

代码实现

Vue组件实例

「v-el-select-loadmore」为自定义指令封装的数据加载指令，是为了解决和优化elementUI下拉选择器加载数据过多出现卡顿问题的。
「filter-method」是下拉选择器的一个自定义属性，可以监听输入的变量，从而依据变量来实现数据的动态获取；

  // 自定义指令  directives: {    "el-select-loadmore": (el, binding) => {      // 获取element UI定义好的scroll元素      const SELECTWRAP_ROM = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");      if (SELECTWRAP_ROM) {    // 添加scroll事件        SELECTWRAP_ROM.addEventListener("scroll", function() {      // 判断滚动          const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;          condition && binding.value();        });      }    }  }

相应的数据函数

export default {  data() {    return {      relatedOpen: false,      options: [] /* 选择下拉框的值 */,      courseList: [],      rangeNumber: 10,      searchLoad: false /* 下拉框的loading状态 */,      value: "",      timer: null    };  },  created() {    this.getOptions();  },  methods: {    // 按需加载    loadMore(n) {      return () => (this.rangeNumber += 5);    },    // 过滤课件    filterMethod(query) {      if (this.timer != null) clearTimeout(this.timer);      !this.searchLoad && (this.searchLoad = true);      this.timer = setTimeout(() => {        this.options = !!query ? this.courseList.filter(el => el.value.toLowerCase().includes(query.toLowerCase())) : this.courseList;        clearTimeout(this.timer);        this.searchLoad = false;        this.rangeNumber = 10;        this.timer = null;      }, 500);    },    // 监听select下拉框的显示和隐藏    visibleChange(flag) {      // 显示时初始化列表      flag && this.filterMethod("");      // 初始化默认值      this.rangeNumber = 10;    },    // 获取选项    async getOptions() {      await searchCourseware().then(res => {        let list = res.data || [];        // 默认展示的数据        this.options = list;        // 原始数据        this.courseList = list;      });    }  }}

注：