elementUI的cascader级联选择控件的默认值(回显)问题

elementUI的cascader级联选择控件使用采坑:设置默认值回显问题解决方案(亲测有效!) 更多文章可关注我的个人博客:https://seven777777.github.io/myblog/ 记录一个刚刚遇到的问题,以及解决方法。希望可以帮助之后遇到同样问题的小伙伴们! 问题描述 使用elementui的级联选择控件,并需要对其设置默认值,以及修改默认值时,发现问题: 先贴出相关核心代码如下: <el-cascader ref="locationCascader" v-model="location" placeholder="省份/城市/区域" :o. 阅读详情
AI摘要

本文详细介绍了如何处理ElementUI中的级联选择控件的后台数据格式,并解决了字符串默认值转换为数组的问题。提供了两种解决方案,一种是通过字符串操作转换为数组,另一种是利用JSON.parse直接转换。

最近用到了elementUI的级联选择控件,级联选择控件的后台数据格式处理,和el-tree是完全一样的,不清楚的同学们,请看我专门写数据的那篇博客:https://blog.youkuaiyun.com/java_xxxx/article/details/81099437。
其实所谓回显,也只是默认值的问题。例如,一个省市联动,如果当一个用户修改自己信息的时候,那么他能看到级联选择的值,也就是说
在修改页面我们给级联选择器赋值一个默认值就可以了。截图是官方文档
这里写图片描述
注意这里的:options=”options”是数组,而非字符串。而且里面的元素为值,只有是值(值一般都是元素的id)控件才能精确的匹配层级结构的数据。还有一个原因就是,我用的是@change方法,它选择元素后,控件自己默认的格式就是数组,然后数组里是每个元素的id。这样存的时候和取的时候的元素类型和格式的一样,控件才能正确的取出数据并显示。
我在这里遇到了一个问题,就是,我保存的user对象里的address是一个string类型的,想当然的就赋值给了默认的options,alert弹出显示的也是[1,24,5],感觉没啥问题,可是console.log()看数据的格式;或者更直接点alert(typeof address)打印出来的数据类型为string,于是问题找到了。
将字符串变为数组赋值给默认的option,然后显示,就行了。问题是,首先我们的实体类中存储的是String,不可能因为前端需要就将实体类给改了,所以这里只能后台接到数据,然后返回给前端,前端再拿到数据在转换成数组赋值给option。

修改方法:

法一:(比较麻烦,但是几乎是万能的,所有的都可以转换成数组)
因为数组是string类型的即 “[1,24,5]”
1、将”[” 和 “]” ,substring
2、将得到的字符串split(“,”),得到一个装有“1”,“24”,“5”的string数组
3、循环拿出数组的每个元素转换成int类型,再push到option数组里,然后赋值给selectedOptions
法二:
以前我都是用法一,但是太麻烦了,后来一想js里不是有个JSON吗,我将字符串直接转换成json对象,
json会根据字符串的格式帮我们制动转换成相应的格式,原理就是”[1,24,5]” 的”[” 和 “]”,后台穿过来的数据json字符串,json在转换成对象的时候,会根据这【】 判断他是数组而非其他类型,于是我们就直接转成数组了,只要一行代码。

app.selectedOptions=JSON.parse(str);

下面是我的部分代码
html:

  <el-cascader
            expand-trigger="hover"
            :props="defaultProps"
            :options="options"
            v-model="selectedOptions"  // 这个绑定的值就是默认显示的值
            @change="handleChange">
    </el-cascader>

js:

 selectedOptions:[],
 $.ajax({
               type:"get",
               url:this.api.userData+"?id="+result,
               dateType:"json",
               contentType : 'application/json',
               success:function(result){
                    app.user=result.data;
                    app.selectedOptions=JSON.parse(result.data.userAddress);
               },
               error:function(result){
               }
           });

运行结果:
这里写图片描述

ps:以后写代码还是要多思考,虽然有些功能能实现,但是要在功能实现过后想一想是否更简单的做法。

ElementUI Cascader级联选择器避坑指南:从源码角度解析默认值回显问题 本文深入解析ElementUI Cascader级联选择器的默认值回显问题,从源码角度揭示其内部状态管理机制,并提供多种解决方案。针对v-model清空后UI状态残留的问题,详细介绍了官方推荐方法、兼容性方案及封装技巧,帮助开发者彻底解决这一常见痛点。 阅读详情

相关推荐

ElementUI Cascader级联选择器默认值回显问题终极解决方案(附完整代码)

本文深入解析ElementUI Cascader级联选择器在表单编辑时遇到的默认值回显问题,提供三种主流解决方案对比及最佳实践。通过直接操作组件引用、强制重新渲染或结合value-key等方法,帮助开发者彻底解决这一常见痛点,并附完整代码实现。特别针对动态加载模式和表单整体重置场景给出了专业建议。

weixin_29227425的博客 227

给ElementUI中的级联选择器设置默认值

给ElementUI中的级联选择器设置默认值 级联选择器的数据源 https://gitee.com/lvhanghmm/store-temporary-files/blob/master/bigFiles/级联选择器数据源.js 最终代码 <template> <div id="container"> <el-card> <...

lvhanghmm的博客 7819

elementUI cascader级联选择控件默认值回显的终极解决方案(实战验证)

本文深入剖析了ElementUI Cascader级联选择控件在清空数据后,内部高亮状态无法同步清除的默认值回显问题。通过分析组件内部状态管理机制,提供了直接访问面板实例、手动重置activePath并调用calculateCheckedNodePaths方法的终极解决方案。该方案经过多版本实战验证,能有效解决清空、表单重置及动态切换数据等场景下的回显Bug。

weixin_29264201的博客 321

elementui级联选择器设置默认值

v-model绑定值设置,类型为数组;

xyj19990301的博客 3590

elementUI cascader级联选择控件默认值回显失效?三步搞定动态重置(附源码解析)

本文深入解析了ElementUI中Cascader级联选择控件在动态重置时,默认值回显失效的常见问题。通过剖析组件内部状态管理机制,提供了三步解决方案:获取面板实例引用、编写核心重置方法、在合适时机调用,从而优雅地清除面板残留的选中状态,确保表单数据与视图一致。

weixin_29290863的博客 431

ElementUI Cascader级联选择器默认值回显踩坑实录:从源码角度解析解决方案

本文深入解析了ElementUI Cascader级联选择器在默认值回显时遇到的典型问题,如初始值不显示和清空后视图残留。通过剖析组件源码,揭示了其内部状态与外部数据同步失效的根源,并提供了从基础配置、利用Vue的key属性强制重置到封装高阶组件的多层次、稳健的工程化解决方案,帮助开发者彻底规避此坑。

weixin_28308325的博客 189

cascader 动态加载 回显_elementUI的cascader级联选择控件的默认值(回显)问题

其实所谓回显,也只是默认值的问题。例如,一个省市联动,如果当一个用户修改自己信息的时候,那么他能看到级联选择的值,也就是说在修改页面我们给级联选择器赋值一个默认值就可以了。截图是官方文档vchl0ru49s7kzokjrl7nysejrm7ssao05rxedxnlcrbuz/pa77xeywrkcmvzc8rh0ru49nn0cmluz8dg0m21xkosz+u1sci7tcs+zbiz1rw...

weixin_39520869的博客 919

西门子1200之PID用法与控制

西门子PID加热试验

gyxgyx789的博客 6241

elementui中el-cascader级联选择器回显解决办法(稳定有效)

1、场景描述 这里展示的是已经获得后台传回来的需要回显数据,在级联选择器中进行回显,并且能保持稳定回显 2、解决办法 2.1、在el-cascader标签中加入 <!--设置key属性是为了让组件重新渲染,重新赋值value,就可以实现回填功能--> <!--v-model绑定的值为要回显的数据,格式为['一级菜单value','二级','三级'...]--> :key="modalKey" v-model="choose" 2.2、在data中定义 da.

weixin_44689397的博客 3万+

如何玩转腾讯云轻量级服务器(新手向)

如何玩转腾讯云轻量级服务器(新手向) ​ 相信不少同学都想将自己的服务器部署到云服务器,让别人通过自己的域名就可以访问到自己的项目,而腾讯云轻量级服务器作为一个小型的应用,支持域名解析和可视化运维等。比较适合新手入门 ​ 本文服务器操作系统为Centos7 一. 购买以及基本配置 1.购买方式 ​ 本文主要面向新手,毕竟一般只有新手才会购买轻量级服务器。所以可以选择购买一年的来学习,以后再根据需要换,前提提示(轻量级服务器没有安全组的,开放端口直接开启防火墙里的即可) ​ 购买连接 购买完成后点击控制

qq_46160687的博客 1万+

别再到处找教程了!Windows下用FFmpeg+Mediamtx+VLC搭建本地RTSP流媒体服务器,保姆级配置流程

本文详细介绍了在Windows系统下使用FFmpeg、Mediamtx和VLC搭建本地RTSP流媒体服务器的完整流程。从环境准备到核心配置,再到推流和拉流的实战技巧,提供了保姆级的避坑指南和优化建议,帮助开发者快速实现稳定的流媒体服务部署。

weixin_42614269的博客 212

解决ElementUI cascade级联选择器组件自动清除选中值的方法

在做省市地级联选择器时,遇到的级联选择器重复点击问题回显上一个选择过的选项 这个问题确实挺烦人的,功能是不影响的,但是给人不是感觉特别的舒服 感谢大佬的解决方法elementUI的cascader级联选择控件使用采坑:设置默认值回显问题解决方案(亲测有效!) 解决方法: 1.这是我的cascader级联选择器代码 <el-cascader ref="cascader" style="width: 328px" .

不会有人真的学前端吧 2247

Flutter应用安卓逆向之hook分析研究---附dart版本对照表(必看篇)

搜索md5、rsa、aes等关键字分析要破解的加密算法,使用frida进行hook可疑函数的偏移地址。,双击进去找到ssl_crypto_x509_session_verify_cert_chain函数的偏移地址进行hook掉;Flutter应用是内置进行ssl证书校验的,无法通过常规方法抓到包,需要通过frida把它内置的ssl校验hook掉。重构完成后会生成新的apk,把它安装到模拟器或者真机中并打开运行,此时系统会在。关键字的函数进行hook(因为其返回的是字符串类型)中,拖进ide搜索字符串。

云霄IT的博客 8440

elementUI的cascader级联选择控件使用采坑:设置默认值回显问题解与Cannot read property ‘level‘ of null问题

问题1:当点击切换第一个下拉菜单,第二个与之联动的cascader组件就会报Cannot read property ‘level’ of null ,如下图 <el-cascader v-if="isTest" ref="locationCascader" @change="fnChangeChapter" v-model="chapterInfo" :options="cha

qq_44827891的博客 1183

基于ESP32Cam摄像头+YOLOv3完成图像识别_355

本项目正是在此背景下提出,设计一个基于ESP32Cam摄像头的图像识别系统,通过WIFI热点通信实现图像数据的传输,并利用上位机(Windows与Android平台的QT APP)实时显示原始图像与识别结果,实现目标检测、识别与标注功能。

594

基于TKVA与深度学习的量子点微型光谱仪光谱重建改进算法研究

本文提出了一种融合深度学习的改进TKVA算法(TKVA-DL),用于提升量子点微型光谱仪的光谱重建精度。该方法创新性地结合深度先验网络与注意力机制,通过自适应学习光谱隐式先验替代传统固定正则化项,并动态加权探测器响应通道。实验表明,所提方法在仿真和实测数据上均显著优于传统TKVA及主流深度学习算法,RMSE降低35%,PSNR提升4.2 dB,同时保持物理可解释性。完整MATLAB实现验证了方法的有效性与可复现性,为微型光谱仪的高精度重建提供了新思路。 关键词:量子点微型光谱仪;光谱重建;Tikhonov正

AI的内部世界的博客 81

elementUI cascader级联选择控件实战:动态更新默认值的最佳实践(附完整代码)

本文深入探讨了ElementUI Cascader级联选择控件在动态更新默认值时遇到的回显Bug,并提供了两种最佳实践方案。通过分析组件内外状态不同步的核心原因,文章详细介绍了利用v-if与key强制刷新组件,以及直接操作内部状态实现精准同步的方法,并附带了完整的封装组件代码,帮助开发者彻底解决默认值回显问题。

websocket5live的博客 470

飞牛NAS打造成童年经典游戏机

这篇文章介绍如何使用飞牛NAS搭建经典游戏模拟器。首先需开启Docker并下载RetroArch-web镜像,随后创建容器并设置端口映射。启动后上传游戏ROM文件(如NES格式),在模拟器中加载即可游玩。文章以修改版坦克大战为例,详细说明按键配置方法。同时还提到公网访问需配置DDNS或使用ZeroTier内网穿透。通过这套方案,用户可以在NAS上重温红白机等经典游戏体验。

dgnankai的专栏 882

elementUI之cascader级联控件的默认值(回显)问题

看了element的官方文档,发现cascader没有对value的值进行说明,但是开发功能在编辑的时候,出现数据回显不显示。几经波折,终于发现了好的解决办法。 cascader的options组件传入以下模式: options=[ { value: 'zhinan', label: '指南', children:[ { value: 'zhihu', label: '知...

weixin_38091374的博客 2105

PVE虚拟机运行不流畅,出现卡顿。

🏆本文收录于《优快云问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收藏&&订阅!持续更新中,up!up!up!!

**My Coding Family** 3061

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

element-ui el-cascader 级联选择器 联动默认值

在使用 element-ui 的 el-cascader 组件根据后台返回的数据,需要展示一个默认值,官网给出的例子https://element.eleme.cn/2.0/#/zh-CN/component/cascader借鉴了一下,话不多说直接上代码: 效果图: 代码块: <template> <div class="block"> ...

qq_38468358的博客 1万+

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

Element中Cascader 级联选择器设置默认值【编辑时的回显】

这里以Element-plus的示例为例 <template> <el-cascader v-model="value" :options="options" :props="{multiple: true}" filterable @change="handleChange"> <template #default="{ node, data }"> <span>{{ data.label }}</span>

cos45sec的博客 7390

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

上一篇: angularJs四大特征
下一篇: java读取一篇英语文章并且统计出单词出现的频率并从高到低输出
java_xxxx
博客等级 码龄9年 127粉丝 99原创
评论 90
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值