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

已于 2022-02-09 18:19:39 修改
阅读量2.1k 收藏 4
点赞数 8
文章标签： jsx vue
于 2022-01-19 16:01:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57607072/article/details/122583140
版权
ant design a-select 数据源更新，但视图没更新的问题

​ 在使用a-select时，发现通过onSearch事件从后端获取到的数据已经更新到了数据源，但是页面上没有任何反应，第一反应是响应式丢失了，然后从控制台输出出来发现并不是数据的问题。

​在这里插入图片描述

在这里插入图片描述

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

m0_57607072
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ant-design-vue3-admin:一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用
05-19
ant-design-vue3-admin 一个基于 Vite2 + Vue3 + Typescript + tsx + Ant Design Vue 的后台管理系统模板，支持响应式布局，在 PC、平板和手机上均可使用。 最新的技术栈 统一的技术规范 权限方案（路由，菜单，操作） 支持多语言 数据 mock 兼容 PC、平板和手机 预览地址： 已将脚手架和一些通用的部分提取出来，方便单独使用，相关文档地址： convue（基于 vite 的类似于 umi.js 的插件）: convue-lib（通用组件、样式、工具方法）:
antd vue select远程搜索下拉不更新数据
爱吃猫的鱼
01-07 831
//重点： :default-active-first-option="false" :filter-option="false" <a-form-model-item label="离线提醒人员" v-if="initialObj.brand !== 1"> <a-select show-search :allowClear="true" v-model="initialObj.remindStaff
vue3+antd select选择器实现下拉框筛选
最新发布
weixin_42234899的博客
03-06 580
我是在filterOption方法中通过当前输入的值所在的对象的value和全量下拉框的value做比较，筛选出来符合条件的进行展示。2、:filter-option="filterOption"是展示搜索后的的结果。a-select标签上加入show-search属性，即支持搜索项；提示：请根据searchTitleList.value的结构进行比较。
使用a-select组件实现多数据源远程搜索下拉框
qq_35452726的博客
10-18 606
前段时间写了一个用ele的组件有默认展示的数据，也能下拉触底加载新数据，然后搜索也能实现搜索远程数据，如有需要请看。按照以上步骤就可以实现简单的远程搜索，但是这个是默认没数据的。下面是组件中用到的方法，为了提高性能代码中用到了防抖。是在vue2中使用的先看data中的数据组件的。然后这个相对于那个实现起来简单一点。
html搜索框事件,HTML onsearch事件用法及代码示例
weixin_34342091的博客
06-04 470
当用户使用类型为“ search”的元素进行搜索时，HTML DOM中的onsearch事件发生。当用户按“Enter”或在搜索框中单击“x”时，此事件有效。用法:在HTML中：在JavaScript中：object.onsearch = function(){myScript};在JavaScript中，使用addEventListener()方法：object.addEventListener...
antd select组件使用onSearch踩坑
Wind_waving的博客
09-26 3197
问题：使用onSearch的时候搜索列表不能及时显示 解决办法：参考
ant design a-select 通过onSearch获取的数据,数据源更新，但视图没更新的问题vue2
weixin_50692948的博客
04-13 518
ant design a-select 通过onSearch获取的数据,数据源更新，但视图没更新的问题vue2
VUE修改select option绑定的数组对象却无法及时刷新页面数据问题
热门推荐
he_321的博客
08-13 1万+
对于一个刚毕业的后端开发者，开始总以为后端开发只做后端，谁知第一个月工作内容大部分都是前端，天真，只能说天真。 才入前端，坑真的很多，简单的样式倒是很好解决，遇到稍微棘手点问题还是挺浪费时间的，这两天就遇到一个VUE修改select option绑定的数组对象却无法及时刷新页面数据问题，整整浪费了一早上的时间，这里简单做下记录。 html页面代码如下： &lt;el-select v-mod...
ant-design 数据更新Dom不更新问题
m0_47733490的博客
04-24 2213
需求是当选中第一题的选项1，则直接回答第三题，选中第一题的选项二，正常回答问题1,2,3，其实就是问题的跳转，这里遇到的bug是，我每次选择新的选项都会与后端进行交互，后端把表单的数据，和答案的数据两组值传回给我进行新的赋值，但是当我选中第一题的选项2，正常回答123题，再选中第一题的选项1，回答1,3题，此时应该只有问题1和问题3 当我再点回问题1的选项2时，就出现了bug，问题2的答案没有渲染上，但是后端传过来的数据是有问题2的答案的，所以此时为dom没有更新 这里支撑问题和答案回显...
解决ant-design select组件远程搜索选项不更新的问题
Vgbire的博客
09-14 3308
  代码如下，在搜索时调用handleSearch方法，去实时更新下拉选择的选项数据。但是下拉选项没有因为搜索更新，打印搜索后的list结果，发现list确实更新了有数据，但是视图没有更新，显示为空。 <a-select v-model="xxx" show-search placeholder="Please enter" :show-arrow="false" :not-found-content="null" @search="handleSearch" > &
vue antd-vue a-selece 即可以下拉又可以搜索你还不会吗！
LYingyuan的博客
12-06 1495
输入内容时，触发search事件，获取的value值即为输入内容；在组件失焦时，将value输入框内容赋值给组件，防止被清空；增加选项可在在数据提交时做处理。一般我们在写管理系统的时候，涉及到大量的表单，有很多输入框或是下拉框，我们是不是的会碰到各种需求满足用户，比如，我们现在有一个下拉选项，稍微有点长，用户就嫌麻烦，要求下拉选项支持。如果搜索不存在的选项，失焦后输入框内容会被清空，所以我们用提供的事件方法blur，去保留输入框内容。没事 多看看官方文档，每个属性都亲自测一下，才会真正明白其意义~~~~
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
全栈开发实战技术分享 前端:Vite3+Vue3+TS+Ant-design-vue3 后端:SpringBoot+MybatisPlus+Mysql
基于 vue3 + ant-design-vue 的中后台管理系统.zip
05-26
基于 vue3 + ant-design-vue 的中后台管理系统.zip
使用vue3+ant-design-vue+vite+ts开发的通用后台框架.zip
01-04
使用vue3+ant-design-vue+vite+ts开发的通用后台框架，实现了权限系统、动态菜单、表格集成快速使用等功能，简洁干净开箱即用。 Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 ...
使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统.zip
01-22
Vue 3.2 -- 使用vue3+ant-design-vue+vite+ts开发的通用中后台框架，实现了权限系统、动态菜单、国际化、mock数据、表格集成快速使用等功能，简洁干净开箱即用。. 各领域数据集，工具源码，适合毕业设计、课程设计...
ant-design select组件远程搜索选项不更新的问题
weixin_50572740的博客
05-17 1179
  代码如下，在搜索时调用handleSearch方法，去实时更新下拉选择的选项数据。但是下拉选项没有因为搜索更新，打印搜索后的list结果，发现list确实更新了有数据，但是视图没有更新，显示为空。 <a-select v-model="xxx" show-search placeholder="Ple...
input[type=search] onsearch事件触发及输入框自动消失
lianzhang861的博客
04-20 1万+
有时候在手机端想点击搜索框弹出的输入法中出现搜索按钮，点击搜索按钮执行搜索操作。使用H5的标签input ,type="search"&lt;input type="search" placeholder="搜索" onsearch="loadData()"&gt;注意这里时间触发用onsearch而不是onclick。function loadData(){ //让输入法消失 $("inpu...
史上最详细的DOM事件之表单事件
qq_39155611的博客
05-30 1022
史上最详细的DOM事件之表单事件 上篇博客讲了DOM的键盘事件，这篇博客我们来讲一讲DOM的表单事件。 HTML代码： <form action=""> <input type="text" autofocus> <br> <input type="text"><br> <input type="search"><br> <input type="
EleAdminPro框架，集成：vue3、Ant Dedign Vue、TypeScripts，a-select-option调用接口获取下拉框数据
07-11
EleAdminPro框架集成了vue3、Ant Design Vue和TypeScript，可以通过调用接口来获取下拉框数据。以下是一个示例代码，演示如何使用EleAdminPro框架调用接口获取下拉框数据并使用a-select-option组件进行展示： 首先，确保你已经安装了EleAdminPro框架以及相关的依赖。然后，在你的Vue组件中，可以按照以下步骤进行操作： 1. 导入需要的模块和组件： ```typescript import { defineComponent, reactive, toRefs } from 'vue'; import { Select } from 'ant-design-vue'; import axios from 'axios'; ``` 2. 创建一个响应式的数据对象： ```typescript const data = reactive({ options: [] // 用于存储下拉框的选项数据 }); ``` 3. 在组件的`mounted`钩子函数中，调用接口获取数据并更新`options`： ```typescript mounted() { axios.get('/api/options') // 假设接口地址为/api/options .then(response => { data.options = response.data; // 假设接口返回的数据为一个数组 }) .catch(error => { console.error(error); }); } ``` 4. 在组件模板中使用`Select`和`a-select-option`组件来展示下拉框： ```html <template> <div> <a-select v-model:value="selectedOption"> <a-select-option v-for="option in options" :key="option.value" :value="option.value"> {{ option.label }} </a-select-option> </a-select> </div> </template> ``` 以上代码示例了如何使用EleAdminPro框架集成的vue3、Ant Design Vue和TypeScript，在组件中调用接口获取下拉框数据，并使用`a-select-option`组件展示选项。请注意替换示例中的接口地址和数据结构以适应你的实际情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值