element组件Cascader懒加载回显问题

最新推荐文章于 2024-04-26 09:30:00 发布
最新推荐文章于 2024-04-26 09:30:00 发布
阅读量917 收藏 2
点赞数
文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51002293/article/details/128337464
版权

选中面板回显

1. 点击编辑后 将后端返回的数据赋值给组件v-model双向绑定的数组中

2. 用传过来的id去遍历绑定的options数组 找到那一项

3. 懒加载是点击父节点以后才会发送请求获取子节点 所以发送请求后 将结果数组用$set()方法 添加到options中的children属性中 这时候已经完成面板的回显

a1cbab0cb70c4c7c97a4f168cb70a2bb.png 

文本的回显

查了很多都不太能解决 最后突发奇想给Cascader属性加了一个ref 可以获取到组件示例

实际中有个属性用来设置输入框文本

将这个属性重新赋值就ok了

41bfb05b87804f8a9d3f7cc0da284759.png

 

codecodegirl
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-cascader 级联选择器懒加载的使用及回显 + 点击任意一级都能返回
神膘护体小月半的博客
02-24 3536
el-cascader 级联选择器懒加载的使用及回显 + 点击任意一级都能返回
Element中级联选择器懒加载的使用
九日的博客
04-16 7667
Element中级联选择器懒加载的使用 之前看element的文档，一直看个一知半解，不知道怎么用级联选择器的懒加载，这里花了点时间终于搞懂了，给大家上一个自己的例子，并附带上几个容易踩上的坑。 上代码！！！ <template> <el-cascader v-model="statusVal" :show-all-levels="false" placeholde...
vue项目 element-ui 级联选择器 el-cascader 回显的完美解决
wocwin的博客
03-15 1万+
vue项目 element-ui 级联选择器 el-cascader 回显的完美解决
【el-cascader-plus亲测有限】el-cascader级联选择器懒加载+多选功能回显失败解决方案
G佳伟
03-11 2231
修复element ui级联懒加载问题，二次封装成el-cascader-plus 第二步：使用el-cascader-plus 如需全局使用就在 main.js 中添加以下代码 在组件中单独使用在文件内添加以下代码 亲测完整代码示例 html
【element-plus】解决级联选择器el-cascader在懒加载模式 使用filterable无法搜索
最新发布
近10年前端开发工作经验，为你分享日常经验所得
04-26 577
解决cascader级联选择器在懒加载模式无法搜索的问题
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
09-22 2137
/ 然后遍历 areaList 找到对应的 areaSeq 获取地区列表。// 遍历一级选择框，把二级选择框的数据放在一级的children属性上。// 先加一个最后层级的地区用于展示，最后在删掉。// 给当前areaCode添加children。，需要我们自动展开到天河区的下一级，效果如下。每一层级的数据，然后组成一个树。// 从后面开始遍历组成一个树。我的实现思路就是拿到。// 点击自动下拉出来。// 先初始调用一次。// 删掉最后选中的。
el-cascader懒加载 超简单的回显
九日的博客
10-14 7364
el-cascader会自动按照写在value里的路径去调用lazyLoad方法实现路径菜单的懒加载，直到整条路径被加载出来。将上两个前提条件，按照以下代码填入；
详解关于element级联选择器数据回显问题
10-17
主要介绍了详解关于element级联选择器数据回显问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element中的Cascader（级联列表）动态加载省\市\区数据的方法
01-21
element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址（引用）传递，动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue Element的el-Cascader 五级省市区联动 lazy开启动态加载，数据回显问题
疑问 搜索 动手 解决 记录
04-08 4517
效果图 子组件 <template> <el-cascader v-if="isShowInfo" :props="props" v-model="selectedValue" placeholder="请选择省市区" @change="handleChange" ></el-cascader> </template> <script> import { getRegion } from '@/ap
element Cascader懒加载，由数据导致的回显问题
Mianbao88l的博客
09-02 497
element Cascader懒加载，由数据导致的回显问题
element-plus级联选择器使用懒加载获取数据无法回显的问题解决方案
weixin_44804939的博客
06-12 2463
element-plus级联选择器使用懒加载获取数据无法回显的问题解决方案
element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
热门推荐
草巾冒小子的博客
03-26 4万+
el-cascader组件 ：（返回结果的）格式转化 有时候会报错：TypeError: thsAreaCode.replace is not a function （bug截图如下） 说白了就是该组件结果返回获得的是个数组，而不是字符串。所以不能使用.replace方法去转化格式。 因而：才有了下面修改后的代码。 为了解决上述问题，先看文章内的举例代码： 参考文章：（element-U...
级联地址选择、懒加载数据回显
weixin_47426048的博客
11-23 430
// An highlighted block /** * 树形数据搜索(广度优先遍历) * @param {arr} tree * @param {name} string * @returns {obj} */ export function breadthSearch(tree, path) { let stark = [] stark = stark.concat(tree) while (stark.length) { var temp = stark.shift()
element ui级联选择器懒加载的使用（调用自己的接口）以及生成级联选择器所需要的数据结构
qq_43725946的博客
11-30 5126
一、如果有多级选择，并且每一级都有非常多的选择。此时使用手打进去每一个选择，那是非常麻烦而已没有意义的。因此，本文介绍了两种方法，进行级联选择器的多选择实现。 二、懒加载实现。（懒加载为需要的时候，也就是点击的时候才发起请求进行二级选择的生成） 1、先看官网的示例。 <el-cascader :props="props"></el-cascader> <script> let id = 0; // 声明在外面 如果在data里面声明，props会拿不到值
Cascader 级联选择器回显
weixin_57905352的博客
01-07 1368
vue Element Cascader 级联选择器回显
el-cascader 懒加载 多选回显
07-29
回答: 对于el-cascader懒加载多选回显的问题，可以通过给el-cascader设置key属性来实现重新渲染和回显。具体的解决方案是，在el-cascader组件上添加key属性，并将key值设置为一个变量，当需要重新渲染和回显时，改变这个变量的值即可。例如，在代码中可以添加一个keys变量，并将其作为key属性的值。当需要重新渲染和回显时，改变keys的值即可实现回显。\[2\]具体代码如下所示： ```html <el-cascader ref="cascader" :props="props" :key="keys" v-model="values"></el-cascader> ``` ```javascript export default { data() { return { keys: 0, props: { lazy: true, lazyLoad(node, resolve) { // 懒加载数据的逻辑 } }, values: \[\] // 已选中的值 }; }, methods: { handle() { // 重新渲染和回显的逻辑 this.keys++; } } } ``` 通过改变keys的值，el-cascader组件会重新渲染，并将已选中的值回显出来。这样就可以实现el-cascader懒加载多选的回显功能。 #### 引用[.reference_title] - *1* *2* [Element UI 使用el-cascader级联选择器懒加载数据回显解决方案](https://blog.csdn.net/qq_37552329/article/details/127102141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v4^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值