element-ui的el-select不显示value对应的label值_<el-option 回显的值是long类型-程序员宅基地

技术标签: java  JavaEE  vue.js  

显示效果如下:
回显时不显示value所对应的值
期望效果如下:
在这里插入图片描述
调试发现: 是value的格式存在问题,读取到的数据和字段返回的数据类型不一致所导致的。

我存的字段是一个省份的字符串ID数组(11,22,33,44,55)格式,进行切割后得到的是字符串,而后台返回的集合中value是long类型的数组,由于得到的数据类型对应不上表单操作的数据类型,进行相应转换即可。

<el-form-item label="可销售省份" 
              prop="areaIds">
          <el-select v-model="dataForm.areaIds" multiple  style="width:33%"
                     placeholder="请选择可销售省份">
            <el-option
              v-for="item in areaList"
              :key="item.areaId"
              :label="item.areaName"
              :value="item.areaId"
            ></el-option>
          </el-select>
       </el-form-item>

[{“areaId”:“11”,“areaName”:“北京市”},{“areaId”:“12”,“areaName”:“天津市”},{“areaId”:“13”,“areaName”:“河北省”}]可以正常回显
[{“areaId”:11,“areaName”:“北京市”},{“areaId”:12,“areaName”:“天津市”},{“areaId”:13,“areaName”:“河北省”}]不可以回显

得知:areaId必须为字符型和表中的areaIds类型保持一致

将后端代码进行类型转换,可以使用mapperFacade进行快速转换,定义一个相同的DTO,将areaId的类型改成字符型,然后进行转换

//原先查出的省份集合
List<Area> areas = areaService.list(new LambdaQueryWrapper<Area>()
                .eq(Area::getLevel, 1));
        //将字段类型转换
        List<AreaDto> areaDtos = mapperFacade.mapAsList(areas, AreaDto.class);
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zp0926/article/details/106402968

智能推荐

初识HtmlParser.Net-程序员宅基地

文章浏览阅读475次。一、HTMLParser.net是什么?HTMLParser.net是HtmlParser的JAVA版本的dot net版本。二、HTMLParser可以用来做什么?HtmlParser是用来改造或者提取HTML,通过HtmlParser可以高速,快捷的从Html页面中分离出你想要的内容。三、HTMLParser的核心模块是org.htmlparser.Parser类,这个类实际完成了对于HTML_htmlparser.net

模拟神器之QEMU-程序员宅基地

文章浏览阅读1.3w次,点赞6次,收藏48次。1. 简介QEMU(quick emulator)是一款由法布里斯·贝拉(Fabrice Bellard)等人编写的免费的可执行硬件虚拟化的(hardware virtualization)开源托管虚拟机(VMM)。QEMU 是一个托管的虚拟机镜像,它通过动态的二进制转换,模拟CPU,并且提供一组设备模型,使它能够运行多种未修改的客户机OS,可以通过与KVM一起使用进而接近本地速度运行虚拟机(接近真实电脑的速度)。QEMU还可以为user-level的进程执行CPU仿真,进而允许了为一种架构编译的程序_qemu

【最详细|附源码】Visual C++(VC)6.0最新安装教程_visual c++安装教程-程序员宅基地

文章浏览阅读1.4w次,点赞14次,收藏78次。软件:Visual C++版本:6.0语言:简体中文大小:34.26M安装环境:Win11/Win10/Win8/Win7硬件要求:[email protected] 内存@4G(或更高)下载通道①百度网盘丨下载链接:提取码:dg2n[更多软件]:点击进入管家「软件目录」!_visual c++安装教程

新路由3 高恪魔改固件+底包_新路由3高恪5.0nat1-程序员宅基地

文章浏览阅读2.7w次,点赞2次,收藏8次。新路由3 newifi3 d2 高恪魔改固件,请在breed中先刷入底包,然后启动路由器进入底包系统后,再在底包系统里面网页web升级固件,选择魔改进行升级,切记必须这样操作。压缩包包含了底包和固件解压密码 123下载地址:https://u13909188.pipipan.com/fs/13909188-384246318..._新路由3高恪5.0nat1

戳破“砖家”假面:唯快不破的时代,为什么这件事一定要慢慢做?-程序员宅基地

文章浏览阅读298次。导读:我们生活在一个嘈杂、混乱的世界中。生活中,我们有很多“权威”和“专家”,他们标榜自己是内行人,宣称自己掌握着该领域的真理,而我们需要做的只有两个字——接受。但事实上..._唯快不破的人为什么定

初始化时checkbox选中问题-程序员宅基地

文章浏览阅读746次。首先我们大家在写页面的时候可能回经常遇到checkbox、radio等一些使选中或者是不选中的问题。这是我在项目当中做的时候发现的一个小知识点,把它赶紧记录下来。以便以后复习与巩固。 现把代码写出来再解释: function operateCheckOrRadio() { var sForm = document.getElementById("sform"); var sStatus = d..._flutter checkbox用变量初始化无法设置为选中状态

随便推点

IDEA修改SVN地址-程序员宅基地

文章浏览阅读6.6k次,点赞2次,收藏6次。IDEA修改SVN地址 SVN地址改变了,在IDEA上的项目地址还没有修改 第一步:选中项目,右键Subversion --> Relocate第二步:From URL路径保持不变(修改To URL为最新路径)第三步:选中项目,右键Subversion --> Update Directory第四步:勾选Update修改URL为最新的即可SVN地址改变了,在IDEA上的项目地址还没有修改_idea修改svn地址

欧拉图和哈密顿图_哈密顿通路度为偶数-程序员宅基地

文章浏览阅读3.8k次。欧拉图及欧拉路径欧拉图 如果图G上有一条经过所有顶点、所有边的闭路径(边不重复,顶点可以重复)充分必要条件 无向图:G连通,所有顶点的度都是偶数有向图:G弱连通,每个顶点出度与入度相等欧拉路径 如果图G上有一条经过所有顶点、所有边的路径(边不重复,顶点可以重复)充分必要条件 无向图:G连通,恰有两个顶点的度是奇数有向图:G连通,恰有两个顶点的出度与入度不相等,其中一个出度比入度多_哈密顿通路度为偶数

Linux下SVN安装配置和使用中遇到的问题-程序员宅基地

文章浏览阅读68次。两个命令:svn info :显示版本库信息,svn的下载url等。svn co https://xxxxx/xxx wodemulu (通过我的目录制定co的文件夹)svn st:显示修改的文件。=-=========================================第一章 安装1. 采用源文件编译安装。源文件共两个(可下载完传入linux),为:s..._can't lunch modelsim make sure

【算法】设计算法求所有强连通分量的完整代码(kosaraju算法)_kosaraju算法代码-程序员宅基地

文章浏览阅读332次。代码:typedef struct anode { int adjvex;//该边的邻接点编号 struct anode* nexarc;//指向下一条边的指针 int weight;//该边的相关信息,比如权值}arcnode;//边结点类型typedef struct vnode { //InfoTyoe info; 顶点的其他信息 arcnode* firstarc;//指向第一个边结点}Vnode;//邻接表头结点类型typedef struct {_kosaraju算法代码

程序员的自我评价_程序员自我评价-程序员宅基地

文章浏览阅读4.4k次,点赞2次,收藏2次。篇一:程序员简历自我评价程序员简历自我评价本人勤奋踏实,工作认真负责,自学能力强;性格开朗,容易与人相处,注重团队协作精神,且能承受较大压力。注重专业基础学习和实践能力的培养,在校期间不仅做过多个课程设计暑假期间也去过单位实践过,对java编程和网站开发具有浓厚的兴趣。篇二:优秀的程序员自我鉴定优秀的程序员自我鉴定以下一篇是一名优秀并且有工作经验的程序员的自我鉴定范文:大家好,我叫xxx。我性格开朗,乐于与人交往,诚实,正直,有教强的上进心,较强的学习能力,在学校团学会的工作使我组织_程序员自我评价

vue的vue-resource和axios介绍_vue-resuorce-程序员宅基地

文章浏览阅读1.2k次,点赞26次,收藏14次。vue的vue-resource和axios介绍_vue-resuorce