element el-cascader 懒加载 （值改变但是样式没变化）

最新推荐文章于 2024-05-07 17:14:34 发布
最新推荐文章于 2024-05-07 17:14:34 发布
阅读量5.1k 收藏 1
点赞数 2
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41812381/article/details/122606293
版权

原理：

（1）因为是懒加载所以没有点过的数据不会被加载

（2）设置值的时候没有触发懒加载,所以值不会出现

解决思路：1.增加Key属性值 propsKey 2.每次改变值的时候顺带改变Key值 AreaChange由此触发懒加载；

实际操作：

data添加对象 propsKey=0

cascader 新增事件和指令<@@change="AreaChange" :key="propsKey">

AreaChange事件内容：propsKey++

以上内容耐心看完 百分百解决

犹娅饲养员
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue el-cascader 多选+懒加载，动态加载选项、单选不加载下一级节点、点击标签选中
weixin_42574985的博客
09-27 1714
通过是否haschlidren以及root是否为true就可在每次点击节点时循环判断，取到市级就在level等于1时判断，将获取到的市级新增 props里的leaf指的属性即可。本身node节点是可以打印的，但是无法循环赋值，打印出来有个小e，使用json格式转换拷贝、定时器等方法也无法做到，如果可以做到就不用怎么麻烦了。如题，后端接口需要一层一层传父id，所以多选的下拉框只能采用懒加载的方式，通过每次点击时的父id调用接口再渲染。
el-cascader v-model 绑定值改变了，但是界面没变化
qq_42440919的博客
02-21 2637
el-cascader v-model 双向绑定 更新
el-cascader级联选择器实现一级二级单选三级多选，选中未显示
MISS_zhang_0110的博客
05-05 3995
【代码】el-cascader级联选择器实现一级二级单选三级多选，选中未显示。
element-plus el-cascader 懒加载实现-省市区街道选择及回显
最新发布
Li_Ning21的博客
05-07 1012
【代码】element-plus el-cascader 懒加载实现-省市区街道选择及回显。
vue el-cascader （element-ui）使用lazy回显失败（已解决！！！）
江城的博客
11-01 1477
原因： slot 作为内嵌的方式在子组件中渲染，lazyLoad获取到的数据为异步，我们把cascader的props放到data中，data在vue生命周期created初期时便构建完成，在构建时触发lazyLoad获取数据，这时我们给予cascader回显数据，slot会重新渲染该部分数据。推荐使用slot方式来解决。
el-cascader设置下拉框样式不生效的问题
weixin_42708755的博客
08-01 2254
样式不生效问题
el-option的值设置了，但视图没更新。
qq_23207707的博客
03-08 2058
vue的key
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的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
el-select数据过多懒加载的解决(loadmore)
10-16
主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Element中的Cascader（级联列表）动态加载省\市\区数据的方法
01-21
element中的cascader其实是有动态加载次级选项的方法。 方法的原理是利用址（引用）传递，动态修改:options。 var c={name: 'bob'} var d=c d.name = 'tom' console.log(c) // {name: tom} ...
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
修复element ui级联懒加载问题，二次封装成el-cascader-plus
迪拉克之海
02-22 1066
el-cascader-plus 经常碰到懒加载不回显的问题，使用起来很不方便，于是花了些时间二次开发了这个组件，下次遇到同样问题就能直接解决，在此开源出来，希望对遇到相同问题的人有帮助。开源互助使程序的世界更美好！ el-cascader-plus基于 element-ui 级联二次封装，弥补了原 element-ui 级联组件懒加载经常无法回显的不足，用法与原级联组件一致。 使用前请确保安装了 vue 和 element ui （或者已单独按需引入 element ui 的级联 Cascade
element组件cascader使用v-model无法动态设置默认值的问题
zyxczyf123的博客
09-11 6024
动态设置级联选择器的默认值
解决Element的Cascader级联选择器懒加载数据回显问题
weixin_44454635的博客
03-06 2902
级联选择其Cascader数据回显问题
解决再局部页面el-cascader设置级联框高度失效问题
jsj521314的博客
10-31 781
总结：可能使用了scoped加了随机动态属性之后导致整个组件无法整体渲染，即使只用deep穿透也没用，所以我们新建一个style来解决问题！注意：两种方式都需要写在新建的style模块中，新建的style需放在原scoped样式后面！问题描述：一开始思路再scoped直接修改级联框对应class，即使使用样式穿透也不生效。或者在el-cascader中添加popper-class属性修改样式。解决方法：在当前页面新建一个不带scoped的style，发现样式生效了！
element-ui .el-cascader-panel 样式不起作用
QIingBo的博客
12-19 3290
element-ui .el-cascader-panel 样式不起作用 问题描述：在使用 element-ui 级联选择器 高度太长，设置它的高度却不起作用 解决办法: 在组件内设置该样式并不会起作用，笔者在全局样式下设置了该组件的样式，解决了问题。一开始其实笔者的数据渲染也出错了，不会按我设置的方法渲染数据。但是设置好了样式数据错乱的问题也解决了，太玄学了 ...
VUE 级联菜单cascader 的options动态加载页面无变化
JAVA求生之路——博主406766467
08-23 738
绑定的options的是一个数组的某个index位置，调用api接口后，界面无变化。
动态懒加载级联选择器el-cascader输入及回显
lijingyu001的博客
09-06 1358
elementui文档提到的lazyLoad懒加载方法，回显做不出来，最后使用了简单粗暴的方法，欢迎大神指点。@change为选中节点事件，@expand-change为点击节点事件。
element plus el-cascader懒加载
01-25
el-cascader是Element Plus中的一个组件，它支持懒加载功能。懒加载是指在用户选择某个节点时，动态加载该节点的子节点，以减少初始加载的数据量，提高页面性能。 要实现el-cascader的懒加载功能，需要满足以下前提条件： 1. 后端需要提供要选中的节点在树中的完整路径。 2. 后端需要提供根据节点ID查询下一级菜单的懒加载接口。 具体实现步骤如下： 1. 在el-cascader组件中，设置lazy属性为true，表示开启懒加载功能。 2. 在el-cascader组件中，设置lazyLoad方法，用于根据节点ID加载下一级菜单的数据。 3. 在lazyLoad方法中，通过调用后端提供的懒加载接口，传入节点ID，获取该节点的子节点数据。 4. 将获取到的子节点数据返回给el-cascader组件，实现路径菜单的懒加载。 以下是一个示例代码，演示了如何使用el-cascader实现懒加载功能： ```html <template> <el-cascader v-model="selectedNodes" :options="options" :lazy="true" :lazyLoad="lazyLoad" ></el-cascader> </template> <script> export default { data() { return { selectedNodes: [], // 选中的节点 options: [] // 树形菜单数据 }; }, methods: { lazyLoad(node, resolve) { // 调用后端懒加载接口，获取子节点数据 // 根据节点ID查询下一级菜单的懒加载接口 // 示例接口：/api/getChildren?id=xxx axios.get(`/api/getChildren?id=${node.id}`).then(response => { // 将获取到的子节点数据返回给el-cascader组件 resolve(response.data); }); } } }; </script> ``` 请注意，上述示例中的接口路径和参数需要根据实际情况进行修改。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值