ElementPlusel-select远程搜索优化：解决首次点击不显示下拉框问题

本文针对Element Plus el-select组件在远程搜索场景下首次点击即显示下拉框的问题，提供多种优化方案。传统回显方法因直接push数据导致下拉框立即展示，影响用户体验。文章提出改进方案，包括使用Promise异步加载数据、延迟加载组件(loaded: false)、初始禁用筛选(filterable: false)并在组件挂载后异步启用筛选，以及直接使用defaultValue预设初始值等方法。 通过这些策略组合，可以有效避免下拉框的提前展示，提升用户体验，并确保数据回显的流畅性。 选择合适的方案取决于具体项目需求。

Element Plus el-select远程搜索：优化数据回显，提升用户体验

本文探讨如何优化Element Plus el-select组件在远程搜索场景下的数据回显，避免首次点击即显示下拉框的非理想情况。

传统回显方法的不足

传统的回显方法，例如：

const customeroptions = ref([])
...
customeroptions.value.push({ id: formdata.id, name: formdata.name })

会在首次点击时触发下拉框展示，影响用户体验。

改进方案：延迟加载与回显

为了避免这个问题，我们可以采用以下策略：

1. Promise异步加载：在remote-method方法中，使用Promise返回包含回显数据的异步结果：

value => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve([{ id: formdata.id, name: formdata.name }]);
    }, 1000); // 模拟异步请求
  });
}

2. 延迟加载：通过loaded选项设置为false，延迟组件加载，直到数据异步加载完成：

{
  loaded: () => false,
  remote: value => { /* ... */ },
}

3. 初始禁用筛选：使用filterable: false暂时禁用筛选功能，避免在数据加载前显示筛选结果：

{
  loaded: () => false,
  remote: value => { /* ... */ },
  filterable: false,
}

4. 异步启用筛选：在组件挂载后，使用$nextTick异步启用筛选功能：

mounted() {
  this.$nextTick(() => {
    this.$el.querySelector('.el-select__input').focus();
    this.$refs['select-ref'].filterable = true;
  });
}

5. default-value预设值：直接在el-select中使用default-value属性设置初始回显值：

{
  loaded: () => false,
  remote: value => { /* ... */ },
  filterable: false,
  defaultValue: { id: formData.id, name: formData.name },
}

通过以上方法组合，可以有效避免首次点击显示下拉框，提升用户体验，并确保数据回显的流畅性。 选择最适合项目需求的方案进行实施。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。