【elementUI】级联选择器cascader数据回显

最新推荐文章于 2024-06-07 16:42:09 发布
最新推荐文章于 2024-06-07 16:42:09 发布
阅读量3.8k 收藏 4
点赞数
分类专栏： elementUI 文章标签： cascader cascader数据回显 cascader显示数据 级联选择器数据显示 级联选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT429/article/details/113399803
版权

elementUI的级联选择器cascader文档是没有如何回显已选择过的数据的样例和方法。但我们可以通过官方文档的getCheckedNodes方法来拿到选择过的数据然后再用v-model来绑定，这样就可以回显数据了

在这里插入图片描述

ps：我设置的cascader是多选的

下图是打印getCheckedNodes()返回的数据，我们找到children为空的那个数据，path字段就是其中一个选中的数据路径。

我们把所有children为空的path字段存到个数组里，绑定cascader的v-model就可以显示数据了。

在这里插入图片描述

Tips：children为空代表这个数据是最底层的那级，它的path就是完整的路径

小花花inhere
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cascader 动态加载 回显_Cascader级联选择器，懒加载回显的问题
weixin_42299032的博客
12-30 2434
遇到的问题：在编辑表单的时候，有时候级联选择器回显不了。v-model="val":props="props"ref="cascader">val: {{val}}let val = 0function generateData(node, resolve) {const { level } = node;setTimeout(() => {let id = 0;const nodes...
element ui cascader 编辑动态加载回显
qiangzi1110的专栏
01-04 1411
el-cascader回显的时候, 需要保证risidencePlace与级联数据对应上, 差一个都不行..... 我的model是查询数据详情之后拼出了的数据risidencePlace=[ "100000", "110000", "110100", "110101" ], 所以加了v-if="isShowCascader", 先设置好model, 之后isShowCascader=true;, 会自动匹配并查询子集. <el-cascader v-if="isShowCascader" .
详解关于element级联选择器数据回显问题
10-17
主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
实现 ＜el-cascader＞ 组件的回显功能
林中明月间丶
06-07 148
vue B页面，多层级数据要进行，接口给到的数据是value值；
element-ui —Cascader 级联选择器（选中方式处理）
weixin_43742167的博客
08-03 6541
element-ui —Cascader 级联选择器点击文本实现选中
cascader级联选择器
Coralpapy的博客
08-18 938
value值：指定选项的值为选项对象的某个属性值（选中的属性） label值：指定选项标签为选项对象的某个属性值（看到的属性） children：指定选项的子选项为选项对象的某个属性值（用于级联） v-model由于数据的双向绑定，绑定selectedKeys值，在实例中，value值用于存储对象的id, 因此selectedKeys也是一个用于存放选定对象的id的数组， <!-- props用来指定配置对象 --> <!--...
element组件cascader使用v-model无法动态设置默认值的问题
zyxczyf123的博客
09-11 6024
动态设置级联选择器的默认值
【element-ui】el-checkbox子父级联动勾选
weixin_48847755的博客
02-21 1447
el-checkbox子父级联动勾选
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
风间琉璃c
03-24 2万+
el-cascader 动态加载选项 以及编辑时数据回显问题
layui_cascader:基于LayUI的级联选择器Cascader
05-06
layui_cascader基于LayUI的级联选择器Cascader效果图单选多选（选项无折叠）多选（选项折叠）配置参数文档（*表示必填）*elem：HTMLElement对象，例如：$('input[name=example]')[0]*options：Array 数据onChange: ...
Vue+ElementUI 中级联选择器Bug问题的解决
11-19
在Vue和ElementUI框架中，级联选择器（Cascader）是一个常用的功能组件，用于展示具有层级关系的数据。然而，使用过程中可能会遇到一些问题，本文将深入探讨一个关于级联选择器出现Bug的情况及其解决方案。 问题...
级联选择器 Cascader 进行省市区选择的各个城市信息的js文件
最新发布
06-21
在进行pc端省市区选择的时候 使用级联选择器Cascader进行省市区的选择时，引入该js文件可以进行省市区的选择，这个数据文件包含每个省、市、区（县）的编码、名称以及它们之间的层级关系。 例如：{ "n": "广东", "c...
vue element-ui 级联选择器 el-cascader 多选数据回显问题(无懒加载)
weixin_44741820的博客
11-10 1858
多选时组件带了父级id，后端只要最后一级的值，回显时也是返回的最后一级的id值
element-ui cascader级联选择器，使用getCheckedNodes()获取选择对象参数信息，及如何使用props自定义设置value、label、children的键名
热门推荐
Umbrella_Um的博客
02-01 2万+
需求一： 我需要在cascader级联选择后，拿到当前选择对象的其他参数信息，而不单单只获取到选择的value值 如上图，ElementUI 提供了这个获取所选节点的信息函数 getCheckedNodes，正好解决了我需要当前节点的其他信息，不单单只是选择时返回的 value 值 需求二： 后端返回的数组，并不是cascader级联选择器默认的value，label，children怎么修改成当前的键值来循环呢？ 但至于怎么用，文档都没有给出例子，所以这里补充一下用法，直接上代码： <t
react 级联选择框的回显处理
qq_41620887的博客
04-06 712
react 级联选择框的回显处理
el-cascader点击label勾选
weixin_41292470的博客
12-16 1306
原有功能的基础上额外加！ //el-cascader里额外加： @click.native="handleSelect" //label点击事件 :popper-class="'cascader1'" //防止多个联级选择器重复 //方法额外加 handleSelect(event) { var that = this; this.$nextTick(() => { let d = document.getElementsByClassName("cascader1");
Vue Element Cascader 级联选择器 修改页面时候选择的节点回显问题
FrankJiang
04-22 1190
根据当时修改页面 对Cascader 选择器进行节点的回显遇到的问题 所以闲暇整理了一个小demo ，直接上代码里面也都有注释 <template> <div> <el-col :span="8"> <el-select v-model="nodeId" placeholder="请选择"> <el-option v-for="item in idOptions" :key="item.id" :label=".
Cascader级联选择器，通过子节点，回显父级及祖先级节点！
A1203228440的博客
10-27 923
cascader级联选择器，通过子节点，回显父级及祖先级节点！
element-ui：级联选择器的回显(只有最底层数据数组)
m0_65544705的博客
11-08 1334
我们一般使用级联选择器和后端进行交互的时候，都是传递最底层选择的数据给到后端一般为id，然后这个级联选择器可以多选的情况下呢，我们也就会传给后端一个由多个id组成的数组，同样的我们向后端获取数据的时候，获取到的也会是一个由多个id组成的数组，那么这个时候我们就需要将这个数组变成element-ui需要的二维数组，所以就不能直接将获取到的数组赋值给element-ui上，需要处理成element-ui需要的数组。第三步：new一个新数组，后续装载(push)每一个循环出来的数组(当然就一个数据就不需要了)。
elementui级联选择器多选回显
10-22
ElementUI级联选择器的多选回显可以通过v-model绑定一个数组来实现。当用户选择多个选项时，这些选项的值会被添加到数组中。当需要回显已选择的选项时，只需要将这些选项的值传递给v-model所绑定的数组即可。例如： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值