elementUI 使用 el-select 的远程搜索功能,导致数据无法回显怎么解决?

news/2024/11/18 19:33:05/文章来源:https://www.cnblogs.com/hxy--Tina/p/18199142

问题:

解决方法:
在数据初始化的时候将获取到的数据做进一步的处理,进行本地select组件的一个添加

const labels = [];const values = [];res.data.rows.forEach((ele) => {labels.push(ele.buildName);values.push(ele.buildCode);});this.$refs.select.cachedOptions = labels.map((label, index) => ({currentLabel: label,      	 //当前绑定的数据的labelcurrentValue: values[index], //当前绑定数据的valuelabel,                       //当前绑定的数据的labelvalue: values[index],        //当前绑定数据的value}));

参考资料:

<el-select ref="selectDom" v-model="form.diagnosisIds" :remote-method="remoteMethod" placeholder="请选择" clearable filterable multiple remote @visible-change="templateTagChange"><el-optionv-for="item in relationList":key="item.id":label="item.name":value="item.id"/>
</el-select><script> export default {data: {return {form: {diagnosisIds: [] // v-model 中绑定的值},relationList: [] // 下拉框的数据}},methods: {// 远程搜索方法,数据太多,不能直接渲染remoteMethod(query) {if (query !== '') {this.relationList = []this.loading = true// 这个方法可以做下节流处理,不需要一输入就发起请求,这里偷懒没有写getDiagnoseInfo({ diagnoseName: query }).then(res => {this.loading = falsethis.relationList = res.filter(item => {return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1})})} else {this.relationList = []}},// 诊断选择器下拉框隐藏时触发事件,清空数据templateTagChange(val) {if (val === false) {this.relationList = []}}}
} </script> 

const ids = [] // 专门用来存放选项id的数据
const strs = [] // 专门用来存放选项name的数据
// res.tagMapList 为接口返回的id与name的集合数据
res.tagMapList.forEach(ele => {ids.push(ele.id)strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {this.form.diagnosisIds.push(ids[i]) // 给选择器v-model赋值,由于是支持多选的,所以会是一个数据// 给选择器的选项赋值,接可以自己匹配上name了this.relationList.push({id: ids[i],name: strs[i]}) 

const ids = []
const strs = []
res.tagMapList.forEach(ele => {ids.push(ele.id)strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {this.form.diagnosisIds.push(ids[i])this.$refs.selectDom.cachedOptions.push({currentLabel: strs[i],currentValue: ids[i],label: strs[i],value: ids[i]})
} 

参考链接:

  1. https://blog.csdn.net/weixin_53312997/article/details/124983389?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-124983389-blog-125002466.235v43pc_blog_bottom_relevance_base8&spm=1001.2101.3001.4242.2&utm_relevant_index=4

  2. https://www.jianshu.com/p/7dfcc05a419f

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/708126.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于uniapp+vue3自定义增强版table表格组件「兼容H5+小程序+App端」

vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件 uv3-table:一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选,自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。 如下图:H5+小程序+A…

扩散模型的多元化应用:药物发现、文本生成、时间序列预测等

AlphaFold3 是 DeepMind 开发的一款蛋白质结构预测软件,它在AlphaFold2的基础上进行了改进。其中最主要的一个改进就是引入了扩散模型,这使得扩散模型不仅仅可以应用于文生图,其实扩散模型早已经在各个领域中都又所发展,今天我们就来研究一下扩散模型的多元化应用。https:/…

FFmpeg开发笔记(二十一)Windows环境给FFmpeg集成AVS3解码器

​AVS3是中国AVS工作组制定的第三代音视频编解码技术标准,也是全球首个已推出的面向8K及5G产业应用的视频编码标准。AVS工作组于2019年3月9日完成第三代AVS视频标准(AVS3)基准档次的制订工作,参考软件的测试表明,AVS3基准档次的性能比上一代标准AVS2和HEVC提升了约30%。li…

笔记3. 链表

目录链表结构单链表和双链表链表题目常用技巧题目面试题 02.06. 回文链表给定一个数,把单链表划分为左边小于,中间相等,右边大的形式138. 复制带随机指针的链表单链表相交问题补充:哈希表和有序表的简单介绍 链表结构 单链表和双链表 // 单链表 typedef struct Node {int v…

vue2中安装scss

在终端执行命令cnpm i sass sass-loader -D 注意 ::v-deep

《程序员自我修养》读书笔记

目录虚拟地址空间(虚拟内存)布局编译与链接例子源码看看obj文件的组成格式主要的段全部的段组成格式:头信息+段一些概念和命令的总结概念命令 虚拟地址空间(虚拟内存)布局bss段节省的是文件的空间,不是虚拟地址空间指令段和数据段在程序运行起来后是不变的,不可伸缩从0地…

pip 下载速度慢

1、打开文件夹,输入%APPDATA%回车,打开%APPDATA%路径,并在此路径下新建一个pip文件夹:2、在pip文件夹下,新建pip.ini文件,并将以下内容添加至pip.ini文件中:[global] timeout = 6000 index-url = http://mirrors.aliyun.com/pypi/simple/ trusted-host = mirrors.aliyun…

ServiceHub.DataWarehouseHost.exe内存占用过高

最近在优化WCS系统中同层调度多辆车子的功能,功能写完后,顺手写了个仿真的脚本,模拟车辆动作。准备测试下合理性。但是使用VS2022进行调试时,刚调试时程序响应很快,因为总是被领导喊去参加各种会议,忙完回来,准备继续测试时,程序响应总是很慢,一开始没注意,以为是许久…

MongoDB基础知识梳理笔记

1、mongodb是什么? MongoDB 是由 C++语言编写的,是一个基于分布式文件存储的开源数据库系统。 在高负载的情况下,添加更多的节点,可以保证服务器性能。 MongoDB 旨在给 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数据存储给一个文档,数据结构由键值(key=&g…

restcontroller中使用delete请求发送带参路径报错

报错内容:Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method DELETE not supported] 具体情景:postman中发送的路径: 每次用这个路径发送delete请求都报错,但是用这个路径发送get请求做查询却没问题,真的让我苦恼好久解决:因为…

Axure介绍

Axure Axure是一款功能强大的原型设计工具,被广泛应用于用户体验设计领域。它的特点和使用方法使其受到了许多设计师和产品经理的青睐。 交互设计 Axure作为一款领先的原型设计工具,突出了其丰富的交互功能,为用户提供了广泛的设计自由度。无论是页面过渡、动画效果、还是表…

Qt/C++音视频开发74-合并标签图形/生成yolo运算结果图形/文字和图形合并成一个/水印滤镜

一、前言 在使用yolo做人工智能运算后,运算结果除了一个方框,还可能需要增加文字显示在对应方框上,以便标记是何种物体,比如显示是人还是动物,或者还有可能追踪人员,显示该人员的姓名。这种应用场景非常普遍,而且非常有必要,可以非常直观的直接看到对应移动的物体是什么…