Cascader 级联选择器如何设置默认值（数据回显）

已于 2022-03-14 15:23:33 修改
阅读量6.7k 收藏 4
点赞数 5
文章标签： 前端
于 2022-02-11 10:42:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44169663/article/details/122874582
版权

Cascader 级联选择器如何设置默认值


在使用级联选择器时，如果要设置默认值，组件接受的数据类型是一个二位数组，当后端返回的结果只有最底层的数组时，就要去遍历整个级联选择器绑定的数据源，获取最外层到最内层数据的路径
页面效果：
在这里插入图片描述

级联选择器数据源（理论上无限层，本人项目中实际最多五六层）：
在这里插入图片描述

后端返回的默认勾选值：
在这里插入图片描述

[19,7] 的意思是级联选择器数据源最后一层的id的集合，19是图一中的密钥对的id，7是应用栈的id
如果想要选择器勾选这两项，那么他需要的数据结构为
[[1,5,19],[1,7]]

从数据源的层级树中查找
在这里插入图片描述
这样就可以了
上个效果图
在这里插入图片描述

༺举个栗子吧༻
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于vue2.0实现的级联选择器
01-19
基于Vue的级联选择器，可以单项，二级， 三级级联，多级级联 web开发中我们经常会遇到级联选择器的问题，尤其是在表单中,无外乎几种情况： 单个级联 (下拉选择框，单选) 单个级联 (多项选择) 二级联动 （省份和城市联动） 三级联动 (省市区联动) 在jquery中有很多好用的插件，比如select2, 单选，多选的功能都具备。 本文探讨一下在vue中的实现级联选择器，自己在项目中碰到过以下两种情况的后端数据,查阅资料后也证实了这两种数据的合理性: 预览地址 github地址 1 后端处理数据逻辑 这种情况是比较推荐的，大量的数据运算放在后端来进行，只需前后端商量好数
设置Cascader级联选择器默认值
qq_41375039的博客
08-05 3837
// this.$set(this.teamArea,0,this.team.province) // this.$set(this.teamArea,1,this.team.city) // this.$set(this.teamArea,2,this.team.area) 无效 // this.teamArea[0] = this.team.province // this.teamArea[1] = this.team.city // this.teamArea[2] = this.team.are
el-cascader的懒加载模式怎么设置默认值
最新发布
Zing_ing的博客
04-08 599
点击修改会跳出一个dialog，dialog需要显示信息，其中地址使用el-cascader标签并使用懒加载实现，地址数据都是从后台获取，如果直接使用v-model绑定默认值，会不显示。
elementUI的cascader级联选择控件的默认值(回显)问题
热门推荐
java_xxxx的博客
07-26 12万+
最近用到了elementUI的级联选择控件，级联选择控件的后台数据格式处理，和el-tree是完全一样的，不清楚的同学们，请看我专门写数据的那篇播客
a-cascader如何设置默认值？ant级联选择器用法。
weixin_45049852的博客
07-12 3794
问题描述： 需要在表单里使用级联选择器，级联选择器绑定model，可以看到编辑信息，解决之前如下图： 解决之后： 看官网解读：ant级联选择器设置默认值 解决思路：只要将:options里，默认选中的id装进数组一个自定义数组（selectDep），用v-mode绑定其就好了，但是！！这个数组里面的id排序有规则的，如果有父级必须将所有的父级的id依次顺序排列！不是将这个子级的id放进去就完事了。 例如： options: [ { value: '1',
element-UI级联选择器(Cascader 回显、默认显示项) - （返回结果的）格式转化 - 代码篇
草巾冒小子的博客
03-26 4万+
el-cascader组件 ：（返回结果的）格式转化 有时候会报错：TypeError: thsAreaCode.replace is not a function （bug截图如下） 说白了就是该组件结果返回获得的是个数组，而不是字符串。所以不能使用.replace方法去转化格式。 因而：才有了下面修改后的代码。 为了解决上述问题，先看文章内的举例代码： 参考文章：（element-U...
Element中Cascader 级联选择器设置默认值【编辑时的回显】
cos45sec的博客
01-07 6536
这里以Element-plus的示例为例 <template> <el-cascader v-model="value" :options="options" :props="{multiple: true}" filterable @change="handleChange"> <template #default="{ node, data }"> <span>{{ data.label }}</span>
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
tarataotao的专栏
08-22 2633
根据数据库存的值'01','02'自动回填到cascader中显示
el-cascader 动态加载+默认值
zepcjsj0801的博客
02-06 7397
但是当再更换地区市，选了一下“郑州”后发现，郑州的子级重复了（选“河南”也一样），这也好理解，说明是郑州的子级又加载了一遍并且填充到下级的选项组里了，新加载的和默认的重复了。最头疼的部分，在编辑表单时要显示出来前面已经选择过的项，也就是回显默认值，首先保证v-mode的值是长度是3的数组（结合情况，不一定非要是3），一定保证[省,市,区]顺序正确，我昨天大意写错了市的id，检查了一天没发现问题。应该很清晰了，就是保证所选路径的上下级和平级数据完整，为什么要完整，因为还有下面一个问题。
关于element的cascader级联选择器，选择任意一级选项，设置默认值及回显的问题
rhcjqmm666的博客
12-07 6960
关于element的cascader级联选择器，选择任意一级选项，设置默认值及回显的问题
elementui级联选择器设置默认值
xyj19990301的博客
07-10 2757
v-model绑定值设置，类型为数组；
Element Cascader 级联选择器的使用示例
12-28
组件—级联选择器 基础用法 <div class=block> <span class=demonstration>默认 click 触发子菜单</span> <el v-model=value options=options change=handleChange></el> </div> <div class=block> <span class=demonstration>hover 触发子菜单</span> <el-cascader v-model=value :options=
使用于iview 中 Cascader 级联选择的 省、市、县数据
09-28
使用于iview 中 Cascader 级联选择的 省、市、县数据 ，在项目中亲自测试过没有任何问题，使用如果有问题请联系
详解关于element级联选择器数据回显问题
12-29
element级联选择器数据回显问题 对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。 表单部分代码： 部门名称： prop=deptId> 请选择部门 props=depShowType options=deptData v-model=...
element组件cascader使用v-model无法动态设置默认值的问题
zyxczyf123的博客
09-11 5861
动态设置级联选择器的默认值
el-cascader设置默认全部
yy_demo的博客
10-09 1315
clearable是用来设置是否支持清空选项，checkStrictly用来设置是否严格的遵守父子节点不互相关联。下拉项赋值之后可以再添加一个首项，lable为全部。在data中给绑定的数据添加一个默认值为空字符串即可。然后你就会发现这个级联选择框有一个默认值为全部。
VanCascader默认值（ 地址code转换）
qq_61947503的博客
10-27 421
我在使用VanCascader的时候，发现页面刷新进入时组件没有默认值，提示的是placeholder“请输入地址”，但是我希望进去时显示我传入的值，如：“湖北省武汉市洪山区”，（code:110101),一般传入的是code值，故希望两者转化。代码说明：使用findOptionWithParents（）获取你传入的modelValue值（如：”110101“），获取你所需要得到的option选项（’东城区‘），根据option获取父级（’北京市‘），父级的父级（’北京市‘），再根据join()拼接。
elementUI的cascader级联选择控件使用采坑：设置默认值回显问题解与Cannot read property ‘level‘ of null问题
qq_44827891的博客
07-28 943
问题1：当点击切换第一个下拉菜单，第二个与之联动的cascader组件就会报Cannot read property ‘level’ of null ，如下图 <el-cascader v-if="isTest" ref="locationCascader" @change="fnChangeChapter" v-model="chapterInfo" :options="cha
elementUI之cascader级联控件的默认值(回显)问题
weixin_38091374的博客
07-29 1751
看了element的官方文档，发现cascader没有对value的值进行说明，但是开发功能在编辑的时候，出现数据回显不显示。几经波折，终于发现了好的解决办法。 cascader的options组件传入以下模式： options=[ { value: 'zhinan', label: '指南', children:[ { value: 'zhihu', label: '知...
cascader 级联选择器懒加载回显
06-08
Cascader 级联选择器的懒加载，一般是通过在 `load` 事件中异步加载子选项实现的。当用户选择某一级选项时，会触发 `load` 事件，此时可以根据当前选中的选项，请求后台数据获取下一级选项列表，然后更新 Cascader 的选项列表。 在懒加载时，如果需要回显已选中的选项，可以通过 `lazy` 属性配合 `value` 属性实现。`lazy` 属性表示是否启用懒加载模式，`value` 属性表示级联选择器的选中值，是一个数组。 以下是一个简单的示例： ```html <el-cascader v-model="selectedOptions" :options="options" :lazy="true" :value="selectedOptions" @load="handleLoad" ></el-cascader> ``` 在这个示例中，`selectedOptions` 是一个数组，用于绑定级联选择器的值。`options` 是一个数组，表示级联选择器的选项列表。`lazy` 属性设置为 `true`，表示启用懒加载模式。`value` 属性设置为 `selectedOptions`，表示级联选择器的选中值与 `selectedOptions` 绑定。 当用户选择某一级选项时，会触发 `load` 事件，此时会调用 `handleLoad` 方法，该方法需要异步请求后台数据，获取下一级选项列表，然后更新级联选择器的选项列表。在加载完成后，需要将 `selectedOptions` 设置为对应的数组，以便回显已选中的选项。以下是一个简单的 `handleLoad` 方法示例： ```js methods: { async handleLoad(selectedOptions) { const res = await axios.get('/api/cascader', { params: { selectedOptions: selectedOptions } }) const options = res.data // 更新级联选择器的选项列表 this.$set(selectedOptions[selectedOptions.length - 1], 'children', options) // 回显已选中的选项 this.selectedOptions = [...selectedOptions] } } ``` 在这个示例中，`handleLoad` 方法异步请求后台数据，获取下一级选项列表，然后使用 `$set` 方法更新级联选择器的选项列表，最后将 `selectedOptions` 设置为对应的数组，以便回显已选中的选项。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值