Element Plus el-select远程搜索：优化数据回显，提升用户体验
本文探讨如何优化Element Plus el-select组件在远程搜索场景下的数据回显，避免首次点击即显示下拉框的非理想情况。
传统回显方法的不足
传统的回显方法，例如：
const customeroptions = ref([])
...
customeroptions.value.push({ id: formdata.id, name: formdata.name })
会在首次点击时触发下拉框展示，影响用户体验。
改进方案：延迟加载与回显
为了避免这个问题，我们可以采用以下策略：
-
Promise异步加载：在
remote-method方法中，使用Promise返回包含回显数据的异步结果：
value => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([{ id: formdata.id, name: formdata.name }]);
}, 1000); // 模拟异步请求
});
}
-
延迟加载：通过
loaded选项设置为false，延迟组件加载，直到数据异步加载完成：
{
loaded: () => false,
remote: value => { /* ... */ },
}
-
初始禁用筛选：使用
filterable: false暂时禁用筛选功能，避免在数据加载前显示筛选结果：
{
loaded: () => false,
remote: value => { /* ... */ },
filterable: false,
}
-
异步启用筛选：在组件挂载后，使用
$nextTick异步启用筛选功能：
mounted() {
this.$nextTick(() => {
this.$el.querySelector('.el-select__input').focus();
this.$refs['select-ref'].filterable = true;
});
}
-
default-value预设值：直接在el-select中使用default-value属性设置初始回显值：
{
loaded: () => false,
remote: value => { /* ... */ },
filterable: false,
defaultValue: { id: formData.id, name: formData.name },
}
通过以上方法组合，可以有效避免首次点击显示下拉框，提升用户体验，并确保数据回显的流畅性。 选择最适合项目需求的方案进行实施。
