前端之家收集整理的这篇文章主要介绍了使用Ant Design Vue的select搜索框出现的问题,前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
<template> <div> <a-form-item label="分类:"> <a-select placeholder="请选择" style="width: 320px" v-model:value="formState.sortValue" :showSearch="true" > <a-select-option v-for="(item,index) in listArr" :key="index"> {{ item.name }} </a-select-option> </a-select> </a-form-item> </div> </template> <script lang="ts"> import { defineComponent,reactive } from 'vue' export default defineComponent({ setup() { let formState = reactive({ sortValue: '',}) let listArr = [ { name: '华为',value: '001' },{ name: '小米',value: '002' },{ name: 'oppo',value: '003' },] return { listArr,formState,} },}) </script>
在 <a-select>上添加 optionFilterProp="label" 他表示搜索时过滤对应的 option 属性,不支持 children :label="item.name"
<a-form-item label="分类:"> <a-select placeholder="请选择" style="width: 320px" v-model:value="formState.sortValue" :showSearch="true" optionFilterProp="label" > <a-select-option :label="item.name" v-for="(item,index) in listArr" :key="index" > {{ item.name }} </a-select-option> </a-select> </a-form-item>
使用getPopupContainer函数 菜单渲染父节点。 默认渲染到 body 上, 如果你遇到菜单滚动定位问题,试试修改为滚动的区域, 并相对其定位。
<a-select placeholder="请选择" style="width: 320px" v-model:value="formState.sortValue" :getPopupContainer=" triggerNode => { return triggerNode.parentNode || document.body } " > <a-select-option v-for="(item,index) in listArr" :key="index" > {{ item.name }} </a-select-option> </a-select>
需要的是字符串类型, 但是返回来的是一个数字类型导致回填失败 描述:华为的value='10'字符串10 但是返回来的是一个数字类型的10 这样回填会出现数字10,而不是回填华为 将数字类型更改为字符串类型就可以解决
<template> <div> <a-form-item label="分类:"> <a-select placeholder="请选择" style="width: 320px" v-model:value="formState.sortValue" > <a-select-option :label="item.name" v-for="(item,index) in listArr" :key="index" > {{ item.name }} </a-select-option> </a-select> </a-form-item> </div> </template> <script lang="ts"> import { defineComponent,reactive } from 'vue' export default defineComponent({ setup() { let formState: any = reactive({ sortValue: 10,value: '10' },value: '12' },value: '13' },}) </script>
有些时候会出现这样的情况,返回来的数据值在下拉框中匹配不到, 此时就会回填返回来的值,但是我们并不需要出现这样的情况 我们期望匹配不到回填空 解决办法:将返回来的值与下拉框中的值进行匹配。 如果查找不到,直接回填空 这种方式需要在每一个使用了下拉框中的页面写方法 很不友好,最好的是从底层处理。给源码一个配置项
以上是前端之家为你收集整理的使用Ant Design Vue的select搜索框出现的问题全部内容,希望文章能够帮你解决使用Ant Design Vue的select搜索框出现的问题所遇到的程序开发问题。
如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。