搜索
简帛阁>技术文章>使用Ant Design Vue的select搜索框出现的问题

使用Ant Design Vue的select搜索框出现的问题

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>

处理Select滚动时不跟随与select框分离

使用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, 
        })
        let listArr = [
            { name: '华为', value: '10' },
            { name: '小米', value: '12' },
            { name: 'oppo', value: '13' },
        ]
        return {
            listArr,
            formState,
        }
    },
})
</script>

数据不存在出现的问题

有些时候会出现这样的情况,
返回来的数据值在下拉框中匹配不到,
此时就会回填返回来的值,但是我们并不需要出现这样的情况
我们期望匹配不到回填空

解决办法:将返回来的值与下拉框中的值进行匹配。
如果查找不到,直接回填空
这种方式需要在每一个使用了下拉框中的页面写方法
很不友好,最好的是从底层处理。给源码一个配置项
Select选择器进行搜索<template><div><aformitemlabel分类:><aselectplaceholder请选择stylewidt
目录AntDesignofVueselect获取key和name我记录AntDesignVue使用select出现问题1select下拉菜单滚动条滚动后,自动弹回到顶部2下拉列表在局部滚动时不
概要这次是写一个基于antdesignvue社团招新小程序后台,因为涉及成员三种状态描述(不/通过,待定),所以在此使用select进行实现,并且点击下拉选择会触发对应函数,更改数据库数据
目录背景步骤1添加less和lessloader依赖2开启javascriptEnabled3新建resetless重置样式4添加样式引用5添加测试代码6添加覆盖样式背景最近在搞项目,改用了AntDe
例如:想要回显id为1温度,结果直接在select中显示了1,而不是选中了温度,此时因为select中的value是string类型,而我们设置id是number类型,对应不上,所以想要选中va
今天学习使用过程中,主要为逐步推进,从登录第一步开始。输入账号和密码后开始向服务器请求token,由于其本身框架中含有的是在例子内取得各种信息,例子中的域名并非我后续能用到域名,于是要找到并更
今天主要是对文件上传续写昨天成功进入到了页面内,今天就仔细看了一下它自带一个上传图片例子,发现其中比较可取是它对在自己文件夹一种打开方式还是比较可取但是它对图片上传就不是那么可取了。由
今天继续对上传后半部分探究一下,还有对上次几个不足进行完善一下。在选择了图片后可以在页面去预览,以及可以定义当前可以选择几张图片上传。不过对上传后半段进度还是缓慢。在拿到了图片后要继续发送就要将
次主要是对于数据上传一个简述(由于之前图片上传有一点问题所以就先把这个给发出来了)对于后台数据,我们做最多工作是啥子呢?增,删,改,查。只要能把这几个操作实现了,那么基本上前台与后端交互
本身今天进度是增删改查中的删,一般在表单里面要想去删除某些属性就要知道这条属性值是什么。就比如说我现在关键字是id,但是我要怎么去知道我要删除数据id是多少呢,毕竟id并不是我输入,而是这