iview的Select组件filterable

比眉伴天荒 2021-06-11 15:14 763阅读 0赞

<FormItem label="国家">
      <Select   v-model="country" ref="sel" filterable>
        <Option v-for="item of countryList" :value="item.name" :key="item.id" >
          {
       {item.name}}
        </Option>
      </Select>
    </FormItem>

使用可搜索属性 filterable 后的问题

一、改变countryList值时会保留前一个countryList选中的选项

解决方式:

1、如果每个countryList中的:key绑定的值不重复，问题解决，可以设置:key是唯一的值

2、每次改变countryList值之前，清空当前Select的选项

this.$refs.sel.clearSingleSelect()

3、每次改变countryList值之前，清空当前Select选中的数据

let query = this.$refs['sel'].$data.query;
    if (query) {
      //赋值为空
      this.$refs['sel'].$data.query = ''
    }

二、重复选择已选的选项，选项显示的位置会变化

![20190401172427889.JPG][]

选择中国后，再选一次中国如下图

![20190401172515603.JPG][]

尚未解决。。。

20190605 补充

原因找到了，

<Option v-for="item of countryList" :value="item.name" :key="item.id" >
          {
       {item.name}}
     </Option>

重复选择时 \{ \{item.name\}\} 左右的空格被写进了选项里，去掉 \{ \{item.name\}\} 左右的空格，问题解决

<Option v-for="item of countryList" :value="item.name">{
       {item.name}}</Option>

[20190401172427889.JPG]: /images/20210605/754241563ee0487c8418eb2aabf18478.png
[20190401172515603.JPG]: /images/20210605/ce295c7c7b6b45f0b23f43b298fc2265.png

发表评论取消回复

表情：

评论列表（有 0 条评论，763人围观）

还没有评论，来说两句吧...

相关阅读

相关 select组件切换tags时，联动的select组件内容清空

前言 > 记录在项目开发中遇到问题的解决方案，方便以后遇到快速解决！问题描述 ![在这里插入图片描述][3713c6fa726f4d3283fdcecf1ebc

朴灿烈づ我的快乐病毒、/ 2024年03月31日 16:46/ 0 赞/ 23 阅读

相关 iview 组件设置头像更换

基于iview 组件设置头像更换  <div style="width: 100%;heig

柔光的暖阳◎/ 2023年01月09日 15:31/ 0 赞/ 128 阅读

相关 SELECT 2 —— 替代SELECT 组件的jQuery 插件

文档地址： [https://select2.org/][https_select2.org] 一、简介 select2 是替代select 组件的jQu

逃离我推掉我的手/ 2022年06月07日 07:43/ 0 赞/ 600 阅读

相关 bootstrap select组件

一、组件开源地址以及API说明 bootstrap-select开源地址：[https://github.com/silviomoreto/bootstrap-select

快来打我*/ 2022年06月01日 13:08/ 0 赞/ 194 阅读

相关 vue-select 组件

场景解决参考文档安装用法场景 . vue组件

朴灿烈づ我的快乐病毒、/ 2022年05月20日 01:58/ 0 赞/ 454 阅读

相关 iview中在table组件中添加select（以及不成功的问题处理）

普通模式 { title: '午饭选择', key: 'lunch', width: 200,

柔情只为你懂/ 2022年03月02日 13:48/ 0 赞/ 695 阅读

相关 iview组件Select使用与回显

数据库存入的是数字，select菜单根据数字显示文字，并且对字段进行改查以及回显 1、编辑页面 <i-select v-model="edit.type" styl

Dear 丶/ 2022年02月19日 14:43/ 0 赞/ 1934 阅读

相关 VUE- iView组件框架的使用

VUE- iView组件框架的使用 1. 下载iView 工程。 ![880909-20190726163634491-1516165653.png][]

╰半橙微兮°/ 2021年10月18日 19:16/ 0 赞/ 326 阅读

相关如何在iview中使用rander函数渲染Select组件和input组件

转自：http://blog.csdn.net/dead\_rabbit6\_0/article/details/79239206 仅用于学习，违者必究！！！

超、凢脫俗/ 2021年09月15日 00:40/ 0 赞/ 443 阅读

相关 iview的Select组件filterable

<FormItem label="国家"> <Select v-model="country" ref="sel" filterable>

比眉伴天荒/ 2021年06月11日 15:14/ 0 赞/ 764 阅读