ant design a-select 通过onSearch获取的数据,数据源更新，但视图没更新的问题vue2

从哪C？V到哪？

已于 2024-01-12 14:44:57 修改

阅读量614

点赞数

分类专栏： JS 文章标签：前端 javascript vue.js

于 2023-04-13 21:03:43 首次发布

本文链接：https://blog.csdn.net/weixin_50692948/article/details/130139440

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

项目中的Select组件在接收数据后，由于filterOption属性默认为true导致中文括号的数据不更新。问题在于组件进行了额外的过滤。将filterOption设为false或自定义filter方法可以修复此问题，从而实现中文括号的正常显示。

摘要由CSDN通过智能技术生成

项目需求是select可输入可选择

虽然入参已经把中文（）转为英文的()可是就是数据就是不更新

在这里插入图片描述
中文（）未更新

英文()更新

最重要的是filterOption这个属性需要为false
select的filterOption属性默认为true…等于说组件在接受到我的数据后又过滤了一遍，这才导致前面看到的数据源更新，视图无变化的问题，把filterOption改为false或者是定义一个filter方法就行了

在这里插入图片描述

最终实现

中文（）号

原博地址！！！万分感谢！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

从哪C？V到哪？

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ant design a-select 通过onSearch获取的数据,数据源更新，但视图没更新的问题vue2

ant design a-select 通过onSearch获取的数据,数据源更新，但视图没更新的问题vue2
复制链接

扫一扫

专栏目录

react使用anddesign的select数据更新页面视图未更新

weixin_44932188的博客

01-12

517

react+antdesign+select数据变化页面视图未更新解决办法

ant-design select组件远程搜索选项不更新的问题

weixin_50572740的博客

05-17

1272

代码如下，在搜索时调用handleSearch方法，去实时更新下拉选择的选项数据。但是下拉选项没有因为搜索更新，打印搜索后的list结果，发现list确实更新了有数据，但是视图没有更新，显示为空。 <a-select v-model="xxx" show-search placeholder="Ple...

参与评论您还未登录，请先登录后发表或查看评论

antd select组件使用onSearch踩坑

Wind_waving的博客

09-26

3303

问题：使用onSearch的时候搜索列表不能及时显示解决办法：参考

antd select 实现可输入可远程检索并选择

Mia的博客

09-13

1534

antd slelect 实现可输入可远程检索并选择

Axios 的两种使用方法简单示例

luzhaopan的博客

08-27

5421

在编写文件代码的过程中，往往需要请求后台的数据，下面介绍一下 Axios 方法的简单使用 1、直接使用，以下代码为在Vue文件中的 methods 方法中定义的获取后台数据的方法 methods: { // 连接后台获取数据的方法 getData () { let params = { lt: '20180411', ...

解决ant-design select组件远程搜索选项不更新的问题

Vgbire的博客

09-14

3636

【AntdVue】select下拉框可输入搜索和添加

sunshine641的博客

08-17

8510

需求：在antd select组件中，既能模糊搜索选择下拉框的选项，又能输入保存不存在的选项。思路： antd的select组件案例中，已经示范了怎么搜索选择。但是如果搜索不存在的选项，失焦后输入框内容会被清空，所以我们用提供的事件方法blur，去保留输入框内容。输入内容时，触发search事件，获取的value值即为输入内容；在search事件内调用change事件，将value值赋给组件；在组件失焦时，将value输入框内容赋值给组件，防止被清空；增加选项可...

vue数据更新但视图（DOM）不刷新解决办法

weixin_49315886的博客

04-10

9974

对此有什么疑问或者其它前端面临的问题都可以来欢迎评论在下知道的定会帮你回答希望能够帮到你 (#^.^#)第二种：vue.$set(要操作的对象或数组, 对象key/索引, 修改后的值)第三种： vue.$forceUpdate()第一种：强制更新dom； vue数据更新但视图不刷新解决办法

vue中数据改变，视图不更新的原因以及解决方法（强制更新视图）

小太阳的博客

03-16

1万+

我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下： 1.数组数据改变时，使用某些方法操作数组，数据变了，但是视图并没改变。（页面没有监测到数据改变）解决办法：使用下面这些方法操作数组，其数据会被vue监测 push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。替换数组：例如filter()、concat()和slice(),这些不会改变原始数组，但是会返回一个新数组。可以用新数组替代原数组。你可能认为这将

关于a-select下拉框回显时短暂显示id的情况以及下拉框有数据但无法选中的问题的解决方案

热门推荐

weixin_45745641的博客

08-11

1万+

概要这次是写一个基于ant design vue的社团招新小程序的后台，因为涉及成员的三种状态描述（不/通过，待定），所以在此使用select进行实现，并且点击下拉框选择会触发对应的函数，更改数据库的数据反映到小程序端。今天那就来讲讲select的使用以及对应触发函数的绑定，先看一下实现的效果图：具体实现过程：写好前端样式对于组件的使用我们可以先去官网文档找到自己想要实现的效果（官方文档传送门），这次我们使用获得选项文本的样式，然后改变参数，写成我们自己想要的效果看一下 a-select 中的

【Antd+Vue】解决Antd select框渲染大量数据卡顿问题

Emily's Blog

07-21

9871

解决Antd select框渲染大量数据卡顿问题一、模拟卡顿场景二、优化方案三、代码拿走即用一、模拟卡顿场景在使用ant design vue开发时候，可能会遇到Select框需要加载几百条甚至上千条数据的场景，比如说需要选个员工啥的。有的小伙伴可能会说了，这么多数据，为啥不分级展示？但有的时候，数据的底层不是我们前端说改就能改的啊，产经给出这需求只能给它搞定！根据下图可以看到，当Select的数据源是很多条数据的时候，点击Select框就会卡顿，更别说搜索啥的了。二、优化方案优化方案：初次

antd动态增减表单时Select中的value属性无效(不显示)

qq_36742720的博客

07-04

5788

在antd的Select标签中，可以设置value和defaultValue。这两者的区别如下：具体可以看这个例子： https://codesandbox.io/s/hvi6z 可以看到是可以通过value或者defaultValue回显数据的。但是我在把Select标签放到动态增减表单项中时，发现用这两个属性就是回显不了数据。后面得益于一篇推文，https://blog.c...

ant design vue中使用＜a-select＞懒加载

daisy01zhang的博客

02-17

1778

ant design vue使用a-select懒加载解决数据卡顿问题

强制刷新 - 选择框

m0_64707449的博客

12-08

789

选择框不清空

ant-design-vue select选择器重置

qq_28016751的博客

03-11

4980

场景：触发"重置"按钮，将下拉框值所选值清除问题：重置方法中this.organId=''或者null后，选择值时选择器选择值不显示当你的select-option是循环出来的时候，你点击清空以后这个值是不会清空的，当你使用组件自带的api– allowClear的时候，你会发现清空以后是undefined，所以当你清空的时候，你可以在select标签上使用v-model。 <a-row> <a-col :span="12"> <a-for.

ant vue a-select 重置

a_靖的博客

05-31

2733

需求：点击重置按钮，初始化下拉菜单选中的值。实现效果图：上代码 <a-form layout="inline" @keyup.enter.native="searchQuery" :form="form"> <a-row :gutter="24"> <a-col :xl="4" :lg="7" :md="8" :sm="24"> <a-form-item label="期数"> <a-s

antdesignvue2a-select默认选中和v-modal

06-03

您好！针对您的问题，antdesignvue的a-select组件可以通过设置`v-model`来绑定选中的值，同时也可以通过设置`default-value`属性来设置默认选中的值。具体操作如下： 1. 通过`v-model`绑定选中的值： ```html <template> <a-select v-model="selectedValue"> <a-select-option value="1">选项1</a-select-option> <a-select-option value="2">选项2</a-select-option> <a-select-option value="3">选项3</a-select-option> </a-select> </template> <script> export default { data() { return { selectedValue: '2' } } } </script> ``` 在上述代码中，通过`v-model`绑定了`selectedValue`属性，即当前选中的值为`2`。 2. 设置默认选中的值： ```html <template> <a-select default-value="2"> <a-select-option value="1">选项1</a-select-option> <a-select-option value="2">选项2</a-select-option> <a-select-option value="3">选项3</a-select-option> </a-select> </template> ``` 在上述代码中，通过设置`default-value`属性为`2`，即默认选中的值为`2`。希望以上内容能够帮助到您！如有任何疑问，请随时追问。