1.使用 ant design of vue 的 select 选择器功能里面的带搜索框 搜索功能时,报错

2. 报错的原因

2.1 使用的函数 filterOption 调用了字符串的方法 toLowerCase,但是选择器拿到的值为 undefined,就会出现该错误。

2.2 打印该函数,来验证该问题

 控制台打印结果,select 选择器,确实取到的children 的text值是undefined。 

 3. 如何解决

3.1 由于先前,使用select 选择器时,使用了动态加载接口数据出来只是做选择作用,并没有在该基础上添加 搜索功能。

<a-select label-in-value  :default-value="{ key: '---选择---' }"
     style="width: 70%"
    @change="handleChangeName"
    size="large" :disabled="disabled" option-label-prop="label">
    <a-select-option  v-for="item in packingNames" 
       :key="item.id" :value="item.id" 
        :label="item.packingName" >
          <span role="img" :aria-label="item.packingName">
            {{item.packingName}}
          </span>
    </a-select-option>
    </a-select>

3.2 修改成带搜索的选择框,对以上代码进行修改

<a-select  show-search  placeholder="请选择"
     style="width: 70%" option-filter-prop="children" :filter-option="filterOption"
    @change="handleChangeName"
    size="large" >
    <a-select-option  v-for="item in packingNames" 
       :key="item.id" :value="item.packingName" >
           {{item.packingName}}
    </a-select-option>
    </a-select>

3.3 最后效果

Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐