element cascade动态加载与回显问题

最新推荐文章于 2022-09-29 11:10:06 发布
最新推荐文章于 2022-09-29 11:10:06 发布
阅读量537 收藏 2
点赞数
分类专栏： vue element ui cascade级联选择器 文章标签： 前端 elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41200024/article/details/122083367
版权

element cascade动态加载与回显问题

在使用element cascade级联选择器的时候，有时需要动态加载下一级，当我们在新建一个表单时，直接选择就可以。但有时我们还要编辑，编辑时需要代入之前的数据，这些动态加载的cascade就很难回显。

尝试了各种方法，最后是这样来实现的：就是在第一层级的时候我们就把请求的接口写在lazyload里面，具体如下图：
比如在我们请求车型数据时，首先要获取品牌，然后是车系，最后是车型，三个层级都是请求后端接口动态获取：

在这里插入图片描述
在这里插入图片描述
这样当我们点击编辑进入页面时，就可以实现动态加载的cascade 回显了，完美实现，不用再手动请求下一层级数据，非常方便。

记录于此，利他利已！
欢迎交流wx: Wendycwb

wendycwb
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
cascader 动态加载 回显_element ui cascader 动态加载回显问题
weixin_34547167的博客
12-30 1337
问题：回显有时不成功有时成功，成功时会发送多发送市和区的请求，请求时间长的时候没有回显成功的几率较大clearablesize="medium"v-model="formData.arealist":props="areaPropsTwo"placeholder="请选择省/市/区":disabled="isForbidden">获取地址数据，这里是三个请求areaPropsTwo: {la...
cascader 动态加载 回显_Element中的Cascader（级联列表）动态加载省\市\区数据的方法...
weixin_29062671的博客
12-30 426
element中的cascader其实是有动态加载次级选项的方法。方法的原理是利用址(引用)传递，动态修改:options。var c={name: 'bob'}var d=cd.name = 'tom'console.log(c)// {name: "tom"}其中找到究竟需要在那层添加数据就变成一个很麻烦的问题。怎么找了？当然只能递归了。简化一下大致思路：var a = [{value: '2...
element ui cascader 动态加载回显问题解决方法
小钢炮的博客
05-09 1万+
我用的element ui cascader 这段三联动是懒加载的 props: { lazy: true, async lazyLoad(node, resolve) { } } 但是当我赋值给cascader的时候，cascader却不显示了。只要重新加载下cascader组件就行。 解决代码： <el-cascader v-if="isShowAddressInfo" v-model="form.addressInfo" :props="props"></el-casca
element UI Cascader 动态加载 lazyload 及 回显
Ton555555的博客
06-05 1万+
element UI Cascader 动态加载 lazyload 页面 数据: 一级省要给初始默认值: options 懒加载: lazy: true, leaf 为true 结束 节点, element 提供的 props 中的属性和方法 观察值的变化 props: { value: 'area_id', label: 'name', lazy: true, lazyLoad(node, resolve) {
vue element el-cascader懒加载和回显问题解决
forever_ThreeMing的博客
09-28 2746
<template> <el-cascader :props="option" :placeholder="placeholder" :options="nodes.defaultNodes" v-model="nodes.selected" :separator="separator" :disabled="disabled"
史上最简单的el-cascader动态加载回显的解决办法
liukaitydn的博客
06-17 9187
关于el-cascader动态加载时回显内容的解决办法
Element UI 使用el-cascader级联选择器懒加载数据回显解决方案
落影随风的博客
09-29 3822
Element UI 使用el-cascader级联选择器懒加载数据回显解决方案
cascader 动态加载 回显_ElementUI cascader级联动态加载回显和搜索看这个就够了
weixin_39781594的博客
01-12 200
这一篇是上一次讨论cascader级联动态加载回显问题的延续。以下是思考和开发的过程，不感兴趣可以直接看使用文档。github.com/zhuss/lazy-cascader为什么要再写一篇呢？当然不是思想觉悟有多高，还不是因为产品提的需求，产品哭哭唧唧的说：“类目太多啦，我要有一个搜索的功能。”一开始我是拒绝的，毕竟上一次为了解决回显问题，耗费了一波本来就不多的头发，可是后来想一想，都是打工人，...
cascader 动态加载 回显_【Vue】elementUI中<el-cascader使用动态加载时的默认值问题...
weixin_31531599的博客
01-12 3424
在element中用回答因为是动态加载，编辑回显也是需要提前把数据加载出来的，赋值之前列表数据已经有了么？最后怎么解决了呢？我是听过强制重新渲染来解决的我的解决方案是偷了个懒，让后台同时给了上次选中的value值和label的值。然后vue文件中data里面新增两个字段来保存，一个是保存value的数组，一个是将label拼接“/”后作为字符串保存起来，当该字符串有值时就把el-cascader的...
解决vue路由跳转到同一页面的刷新问题
热门推荐
sinat_41200024的博客
03-18 1万+
问题描述：当我使用路由跳转页面时，如果页面跳转是同一个路由，传递的参数不同时，页面不刷新， 如下图：待收定金和待收首款其实跳转的是同一个组件 ，只是他们传递的参数不同而已。 当我使用路由进行跳转时，我发现第一次是可以正确跳转的，比如我当前在其他页面，当我点击一个“待收定金”他可以正常的跳转到指定组件去，此时当我再点击“待收首款”时，页面不刷新，还是之前的数据，查了很多资料也没找到合适的解决办法。...
vue 引用组件报错——找不到组件的解决方案
sinat_41200024的博客
11-30 1万+
vue在开发页面时引用组件报错 在使用vue开发页面时报如下错，到处找问题，components的注入也是写正确的 后来才发现是这里引入写错了，引入组件不能写{} 改成下面这种就可以了 记录下工作中的坑~ ...
Vue动态生成el-checkbox点击无法选中的解决方法
sinat_41200024的博客
07-05 1万+
最近遇到一个问题，在动态生成的多选框当我设置了默认值，进来之后无法修改，不能取消也不能选中其他的选项， 数据绑定是用的v-model 后来发现，再现这个问题的原因是当我点击编辑时，是这样赋值的： 而这个row里面没有字段channelPurposes，所以导致dialogForm里面字段缺失，即使是我单独加上这个也不行，于是，将如上赋值改成下面这种方式就可以了 改成这样问题解决了，可以自如...
在vue项目中 form表单 校验保留小数点后两位
sinat_41200024的博客
03-08 8994
在项目中要求输入金额时只保留小数点后两位，如下图： 在vue项目中使用的是form表单，需要添加自定义校验规则，用正则如下： var isPriceVlidator= (rule, value, callback) =&gt; { var pattern = /^\d+.?\d{0,2}$/; if(value &gt; 214748){ return callback(new Error(...
vue里嵌套对象渲染报错的解决方法
sinat_41200024的博客
01-04 6977
在页面渲染时，我的数据是嵌套的对象，如下图： 页面运行时可以正常显示，可是可以看到控制台还是会报错，如下图： 最后发现只需在页面显示时加一个判断就不会再报错了，如下图： ...
解决 vue-element-admin在IE中打开空白的问题
sinat_41200024的博客
03-19 6685
vue在兼容IE的时候打开一直显示空白并报错，在IE11中也是打开空白报错，网上看了许多方法都试了也不行，后来发现原来是最后一步的配置错了，咦，桑心的，现在记录一下全过程，供参考： 解决办法如下 ： 1.首先安装babel-polyfill依赖 npm install --save-dev babel-polyfill 2.进入项目入口文件 main.js 导入 import “b...
vue 遍历对象并动态绑定在下拉列表中
sinat_41200024的博客
06-05 5733
从后台获取到的数据是一个对象，如： var ssData = { 1: ‘苹果’, 2: ‘香蕉’ ， 3 : ‘橙子’ } 前端要动态绑定到一个下拉选择框中，遍历数组方便，那遍历对象呢，如何才能正确显示他的key, value呢，代码如下： <el-select clearable v-model=“addform.ddd” placeholder=“请选择” @change=“c...
axios 怎么传数组给后端
sinat_41200024的博客
12-04 4990
前端如何给传数组参数给后端： 直接用数组方法传会报如下错误 后来用qs序列化后可以传过去，但qs需要先引用， 我与后端约定用这种格式传递 虽然成功了，但其实并不是我想要的方式，对于前端怎样给后端传递一个包含对象的数组还在研究中。 谁有好的办法，求分享！！ ...
vue前端导出功能在ie11中的兼容问题解决
sinat_41200024的博客
04-10 4687
在用vue做前端开发时，需要对列表加一个导出功能，如下写法，没有else里面的，在ie之外的浏览器都可以正常导出，可是在ie里却没有反应，后来加上else 里面这句即可以了。 代码是这样的： expor(this.exportDatas).then(res => { const blob = new Blob([res.data]) const fileName = ‘某表.xls’ if...
el-cascade懒加载回显
最新发布
02-01
el-cascade是Element UI框架中的一个组件，用于实现级联选择器。懒加载回显是指在级联选择器中，当某个级联选项被选择时，根据选择的值动态加载下一级的选项，并将已选择的值回显到级联选择器中。 在el-cascade中实现懒加载回显的步骤如下： 1. 定义级联选择器的数据源，包括每个级联选项的值和对应的子选项。 2. 使用v-model指令绑定级联选择器的值。 3. 监听级联选择器的change事件，在事件处理函数中获取当前选择的值。 4. 根据当前选择的值，动态加载下一级的选项数据。 5. 将已选择的值回显到级联选择器中。 具体实现方式可以参考以下代码示例： ```html <template> <el-cascader v-model="selectedOptions" :options="options" @change="handleCascadeChange" ></el-cascader> </template> <script> export default { data() { return { selectedOptions: [], // 已选择的值 options: [ // 级联选择器的数据源 { value: 'option1', label: 'Option 1', children: [ { value: 'option1-1', label: 'Option 1-1', children: [ { value: 'option1-1-1', label: 'Option 1-1-1', }, { value: 'option1-1-2', label: 'Option 1-1-2', }, ], }, { value: 'option1-2', label: 'Option 1-2', }, ], }, { value: 'option2', label: 'Option 2', }, ], }; }, methods: { handleCascadeChange(value) { // 根据选择的值动态加载下一级的选项数据 // 这里可以根据实际需求进行异步请求获取数据 // 并更新options中对应级联选项的children属性 }, }, }; </script> ``` 在上述代码中，`options`数组定义了级联选择器的数据源，`selectedOptions`用于绑定已选择的值。在`handleCascadeChange`方法中，可以根据选择的值动态加载下一级的选项数据，并更新`options`中对应级联选项的`children`属性。这样就实现了el-cascade的懒加载回显功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值