vue element-ui 级联选择器 el-cascader 多选数据回显问题(无懒加载)

已于 2023-11-10 14:48:01 修改
阅读量1.7k 收藏 2
点赞数 2
文章标签： vue.js elementui 前端
于 2023-11-10 14:46:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44741820/article/details/134332643
版权

cascader 多选后台只要最后一级的数据

详情，修改时，选中时，多选带有父级id，后端只要最后一级的值，回显时也是返回的最后一级的id值，网上查了很多资料，都是说递归去找上一级，感觉有点麻烦，翻遍element文档，发现只要props加一个属性就可以了

在这里插入图片描述

:props="{emitPath:false}"

这样change之后的值本身就会只有最后一层id，可直接传接口，接口返回时直接用返回的数组就会自动回显

三七是只没毛的猫
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现 ＜el-cascader＞ 组件的回显功能
CC酱写前端的博客
04-26 526
vue A页面，用户填写了el-cascader多层级数据，层级list数据从接口获取；vue B页面，多层级数据要进行回显，接口给到的数据是value值；
Vue使用Cascader级联选择器数据回显中的坑
Raytheon的博客
04-25 1万+
业务场景 由于项目需求，需要对相关类目进行多选，类目数据量又特别大，业务逻辑是使用懒加载方式加载各级类目数据，编辑时回显用户选择的类目。 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下： 1、由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显，如何自动全部加载已选择类目的相关节点数据； 2、提前加载数据后，点击相应父级节点出现数据重复等； 3、使...
el-cascader回显失败；el-cascader回显不出来
i_am_a_div的博客
06-30 5656
el-cascader回显失败；el-cascader回显不出来
Vue 关于el-cascader组件解决级联多选回显需求和部分TypeError: Cannot read property ‘level‘ of null问题
weixin_45365220的博客
03-25 1445
昨天遇到了回显的问题，在网上找了很多博客看，一直没看到重点，这里总结一下遇到的坑 ● 级联组件< el-cascader > 以多选可搜索为例，配置如下关于属性，具体可以去看Vue的element组件官网 <el-cascader placeholder="手动搜索标签:" v-model="tagInitData" // 绑定的值也可做默认值 :options="tagData" // 预置选项
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
热门推荐
风间琉璃c
03-24 2万+
el-cascader 动态加载选项 以及编辑时数据回显问题
el-cascader组件 回显
最新发布
曲小强
01-10 983
【代码】el-cascader组件 回显。
vue项目实现el-cascader下拉多选回显
weixin_65982275的博客
07-31 1349
【代码】vue项目实现el-cascader下拉多选回显。
(vue)el-cascader级联选择器实现单/多选最后一级并回显
nyf_unknow的博客
01-09 2990
el-form-item label="选择算法模型：">:props="{ value: 'id', label: 'name', multiple: true, emitPath: false,}" //后俩个重点filterableclearableplaceholder="请选择"//自定义展示//算法模型改变console.log("算法模型改变");},:show-all-levels="false" //重点//字段。
element-ui的el-cascader级联选择，当获取到的数据最后一级为空数据，且勾选后回显不了数据内容的解决方法
qq_39877681的博客
01-16 1454
element-ui的el-cascader级联选择，当获取到的数据最后一级为空数据，且勾选后回显不了数据内容的解决方法
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @expand-change=censusLandChange :props={ va
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
vue element-ui el-date-picker限制选择时间为当天之前的代码
10-16
主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element cascader 多选的添加于回显（省市区）
qq_38818429的博客
09-16 811
多选的提交和回显。
element-plus级联选择器使用懒加载获取数据无法回显的问题解决方案
weixin_44804939的博客
06-12 2512
element-plus级联选择器使用懒加载获取数据无法回显的问题解决方案
element-ui中的el-cascader 级联选择动态加载数据回显问题,输入框中不显示默认的文本
gaojian531048553的博客
06-19 9564
一直比较喜欢使用element-ui,在近期项目中有用到element-ui中级联选择,遇到了一个问题:在编辑详细信息的时候,原来已有的值无法显示的问题,经过研究发现有两种情况, 一.显示最后一级节点的时候即设置(emitPath=false和show-all-levels=false), 由于数据是动态加载暂时还没有获取最后一级的节点数据(也没有全路径),所以input输入框中 正常是无法显示默认值得name,或者显示全路径,初始默认值必须要满足[上上级code,上...
el-cascader 回显 下拉框最后一级定位在上一次位置 解决方案
qq_37592561的博客
07-10 2283
el-cascader 下拉框回显问题回显定位还是在上一次位置解决方法 回显定位还是在上一次位置 解决方法 增加ref属性 <el-cascader v-model="modeValue" :options="modeOptions" @change="modeChange" ref="cascader" :props="{ checkStrictly: true ,value: 'modId', label: 'modName', children: 'nextModu
el-cascader回显
09-11
### 回答1： el-cascader 组件可以通过设置 `v-model` 来实现默认选中的值的回显。例如： ```html <el-cascader v-model="selectedOptions" :options="options" :props="props" @change="handleCascaderChange" ></el-cascader> ``` 其中，`selectedOptions` 是一个数组，表示当前选中的值的路径，`options` 是一个数组，表示 el-cascader 的选项数据源，`props` 是一个对象，用于配置选项中的各个字段。在组件初始化时，可以将默认选中的值传入 `selectedOptions` 中，从而实现回显。例如： ```javascript data() { return { selectedOptions: ['zhejiang', 'hangzhou'] } } ``` 这样，在页面加载时，选中的值就会自动显示在 el-cascader 组件中。同时，当用户选择其他选项时，`selectedOptions` 数组也会相应地更新，以便在后续操作中使用。在实现回显时，还可以通过监听 `change` 事件来实现特定的逻辑处理。例如： ```javascript methods: { handleCascaderChange(value, selectedOptions) { console.log(value) // 当前选中的值 console.log(selectedOptions) // 当前选中的选项对象 } } ``` 通过监听 `change` 事件，可以获取用户选中的值及其对应的选项对象，从而进行进一步的操作，例如根据选中的值加载相关数据等。 ### 回答2： el-cascader是一个基于Element UI的级联选择器组件。它可以用于处理多级分类、地区选择等复杂的级联关系。 el-cascader的回显功能指的是在级联选择器中已选择的选项可以在组件初始化时显示出来。一般而言，回显功能是通过设置组件的value属性来实现的。 在使用el-cascader时，我们可以通过设置value属性将已选择的选项传递给组件。value属性的值应该是一个数组，元素的顺序应与级联选择器中每一级的选择顺序相对应。例如，如果级联选择器有三级，那么value属性的数组应该有三个元素，分别代表每一级的选择结果。 当我们设置了value属性后，el-cascader会根据传递的value值，在初始化时自动选中相应的选项。这样就实现了级联选择器的回显功能。 除了设置value属性外，我们还可以通过设置默认值defaultValue来实现回显。defaultValue属性的值也应该是一个数组，代表着每一级的默认选中结果。当级联选择器没有初始选择时，组件会自动根据defaultValue进行回显。 无论是通过设置value属性还是defaultValue属性来实现回显，我们都可以在初始化时使级联选择器显示已选择的选项。这样用户在使用时可以方便地查看之前的选择结果，并可以修改或继续选择其他选项。 综上所述，el-cascader的回显功能是通过设置value属性或defaultValue属性，使级联选择器在初始化时显示已选择的选项。这样用户在使用时可以方便地对已选择的选项进行查看、修改和继续选择。 ### 回答3： el-cascader是一个基于Element UI的级联选择器组件。它在多层级的选择列表中，通过级联的方式展示数据，并允许用户进行选择。 el-cascader回显指的是在级联选择器中，当用户已经选择了某些选项后，再次打开选择器时，之前选择的选项可以自动回显出来。 在使用el-cascader组件时，可以通过设置value属性来实现回显功能。value属性接受一个数组，每个元素对应每一级选择的选项的value值。 假设有一个省市区的级联选择器，用户已经选择了北京市朝阳区这个选项。当用户再次打开选择器时，可以通过设置value为['北京', '朝阳']来实现回显。这样，选择器会自动展开到北京和朝阳这两个选项，并将它们设置为已选中状态。 除了设置value进行回显外，el-cascader还提供了其他相关的API。例如，可以使用clear方法清空当前选择的选项；可以使用getCheckedNodes方法获取已选中的节点数据等。 总之，el-cascader回显是通过设置value属性，将之前选择的选项展示出来的功能。这样可以为用户提供更好的操作体验，让用户知道自己已经选择了哪些选项，方便用户进行后续的选择或操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值