前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue3 Element Plus select 同时使用filterable,multiple交互问题

vue3 Element Plus select 同时使用filterable,multiple交互问题

作者头像
子夜星辰
发布2023-10-17 18:05:30
9120
发布2023-10-17 18:05:30
举报
文章被收录于专栏:李白偷偷偷猪

今天遇到一个问题,element plus 写一个城市下拉,同时支持多选和搜索,加完后发现,搜索后选中一项,点击右侧空白页面关闭下拉框后,select 无法再次选中,并且右上角小三角箭头是展开的,如下图

需要再次点击一下空白位置,或者在输入框内多次点击才能继续打开下拉框,搜索或者选择,用户体验不友好,继续翻官方文档,提供了一个 visible-change 事件来监听下拉框的出现和隐藏,加上去后发现,正常打开关闭,会触发两次事件,而我选中其中一项的时候,会执行三次,多执行了一次打开事件(就是这多出来一次导致上图小三角展开,但是下拉却没出现,不太理解),继续尝试

网上搜了半天,居然没找到一个遇到同样问题,也不知道是百度算法推荐的问题还是什么,最终解决方案如下,记录一下,方便遇到同样问题的小伙伴快速查找

代码语言:javascript
复制
<template>
  <el-select ref="selectCity" v-bind="$attrs" v-model="selected" @change="handleChange" @visible-change="visibleChange" @remove-tag="removeTag">
    <el-option v-for="{id, name} in options" :key="id" :label="name" :value="id" />
  </el-select>
</template>


// ps vue3 只放了解决该问题的方法
// 解决 filterable multiple 同时使用 选中一项后光标默认选中问题
const visibleChange = (item) => {
  if (item) {
    nextTick(() => {
      selectCity.value.focus()
    })
  } else {
    nextTick(() => {
      selectCity.value.blur()
    })
    
  }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-10-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档