用element-ui 组件Cascader 级联选择器遇到的坑

最新推荐文章于 2024-08-02 10:26:39 发布
最新推荐文章于 2024-08-02 10:26:39 发布
阅读量1.1w 收藏
点赞数
分类专栏： vue element-ui 文章标签： vue element-ui Cascader 级联选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyy_zyt/article/details/102953790
版权

标题element-ui 组件Cascader 级联选择器遇到的坑

                   话不多说~先上效果图为敬

在这里插入图片描述
效果一目了然，就是想完成二级联动的选择器，按照element里面的api配置数据源options，如下图
在这里插入图片描述
在这里插入图片描述
不知道你们发现什么没，就是由于自己粗心，在配置数据源的时候配置父级的value和children的多个其他的数据时value值一样，看似没有什么错误，效果确实也没有什么错误，但是哈哈哈哈哈往下看
就像第一张图一样我选中第二级的其他选项时，在输入框它不显示，但是在打断点的时候数据是绑定到的，就是不显示在页面上面
在这里插入图片描述
正常应该是这样能显示你选中的数据。重点来了，问题就出现在配置数据源的时候父级value不能和子级的value的值一样，把父子的value区分便可。
在这里插入图片描述

H~洋
关注
专栏目录
Cascader级联选择器只展示后端返回的前两层
qq_43648676的博客
07-26 1244
Cascader级联选择器只展示后端返回的前两层
element-ui中 Cascader 级联选择器 动态加载
weixin_38371427的博客
12-02 301
第一步：添加 el-cascader 组件标签 <el-cascader v-model="cityVal" :options="cityoptions" placeholder="请选择行政区划" :props="props" clearable ></el-cascader> 第二步：添加 props 属性 props: { // expandTrigger:'hover', checkStrictly:true, lazy: true,
el-tree-select/el-tree设置只显示两个层级
最新发布
秋思的博客
08-02 468
若只需显示两个层级，加入以下代码，处理数据。当使用树形选择时，如何控制显示的层级数？当未设置时，完全显示，共3个层级。处理之后：只显示两层。
elementui的Cascader 级联选择器多选后回显问题
一个UI、前端爱好者。
07-21 1349
要在 Element UI 的 Cascader 组件中实现多选后根据选中的最后一级的多个 id 回显选中项，你可以使用 Cascader 组件的。属性来设置选中的值。存储了最后一级的多个 id。当点击“回显选中项”按钮时，// 根据选中的最后一级的多个 id 设置选中的值。// 开启该属性使级联选择不限制必须选中父级。// 假设这些是选中的最后一级的 id。，从而实现级联选择器的回显功能。，以适应不同的数据结构和选中项。你可以根据具体的需求调整。// 用于存储选中的值。
记录element-ui级联选择器，二级三级列表无法显示的解决办法
qq_45654741的博客
08-12 1625
<!-- 选择商品分类的级联选择框 --> <el-cascader expand-trigger="hover" :options="catelist" :props="cateProps" v-model="selectedCateKeys" @change="handleChange"> </el-cascader>
element Cascader 实现选择一级二级隐藏
meixinmeifei__的博客
06-16 1168
element 级联选择一级 不展示二级
cascader遇到的坑（点击选中时，弹框不关闭；选择的内容回显是radio不显示选中状态；要求点击文字也可选择；）
菜同学的博客
05-13 4602
测试提了个bug，选择目录后选择框不自动关闭 点击了一下确实如此 这里我使用的是 elementUi 的 cascader 具体代码如下： <el-cascader ref="catalogue" v-model="exportForm.directIds" :options="catalogueList" :props="{value: 'id', label: 'directoryName', children: 'child...
element-ui使用Cascader 级联选择器遇到的坑
fangqi20170515的博客
03-28 732
按照官网给的教程使用，当级联选择器内容需要动态变化时，会爆出Cannot read property ‘level’ of null错误。
基于vue+element-ui实现Cascader级联选择器+Table树形数据
椰卤工程师的个人博客
11-13 2255
开发进度提前50%，啊，真香。 下面，看图说话 Table树形数据 Cascader级联选择器 功能实现+详细代码 Cascader级联选择器 options属性指定选项数组即可渲染出一个级联选择器，所以后端接口返回的数据结构要保持一一致性，这样处理起来会省很多事。 element官网给出的options需要的数据格式： options: [{ value: 'zhinan', label: '指南', children: [{
element-ui中 Cascader级联选择器实现一级单选，二级多选
热门推荐
qq_44417271的博客
04-30 1万+
可通过 props.multiple = true 来开启多选模式 <el-cascader v-show="ifxianshi == 1 && paddinglaiyuan" ref="myCascader" :options="options" :props="{ multiple: true, checkStrictly: true }" clearable collapse-tags styl
element-ui Cascader 级联选择器清除选中
Lingling_12356的博客
11-27 1137
<el-col :span="24"> <el-form-item label="教室地址" prop="regionCode"> <el-cascader style="width: 100%;" class="input-width" ref="cascaderClassroom" expand-
Element-UI cascader级联选择器，任意选择（父级也可）
孤舟行客
07-28 5371
Element-UI cascader级联选择器，任意选择（父级也可） <el-cascader ref="cascader" v-model="queryData.code" :options="options" :props="{ checkStrictly: true, expandTrigger: 'hover', emitPath: false }" > <template slot-scope="{ node, data }"> <div class=
ElementUI级联选择器择任意项的两个缺陷，我不说，你也不知道吧
Web_chicken的博客
12-02 1579
1.ElementUI官网级Cascader 级联选择器 这样的话效果是实现了，但是存在两个问题： 1、只能点击圆圈才能选中，点击文字 label 没有效果 2、点击圆圈后理想是自动收起下拉，但这个是点击下拉框之外的地方才可以收起。 2.以下就是我的解决办法 <el-cascader // 一定要加ref属性稍后解决第二个问题 ref="refHandle" v-model="uploadFileValue" :options="options" placeholder="试
解决ElementUI级联选择框el-cascader任选一级的坑
weixin_46653941的博客
09-07 7243
在官方文档给出的示例中，el-cascader设置“props.checkStrictly = true”即可实现任意选择一级，但却只能点击左边的单选框选择节点，不能直接点击文字选中， 为此记录下解决方法： 对于一个级联选择框，设置“props.checkStrictly = true”，“props.expandTrigger=hover”。级联选择框的触发方式必须选择“hover"方式。 <el-cascader v-model="value"...
elementUI的cascader级联选择控件的默认值(回显)问题
cccdf_jjj的博客
06-19 1万+
最近接了一个需求 要实现这种效果，在使用cascader的时候遇到一个坑，就是如何设置默认值的问题 首先，算了还是直接上代码吧 <el-cascader placeholder="试试搜索" :options="allOptions" ...
设置el-cascader级联组件只有第2级别可选
qq_38969618的博客
03-19 3432
.el-cascader__dropdown .el-cascader-menu:first-child .el-cascader-node label{ display:none; }
【总】设置el-cascader级联结构为2级时，只有第2级可勾选且点击label就可选中，且绑定值直接为第2级id数据。(popper-class属性可用来区分多个级联)
qq_38969618的博客
05-20 8776
popper-class属性、css相关设置
element-ui级联选择器中二三级列表无法显示的解决办法
代码在路上的博客
02-27 1088
记： <el-cascader :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable> </el-cascader> cascaderProps: { expandTrigger: 'hover', checkStrictly: t
elementuiPlus el-cascader限制级别选择
qq_44762906的博客
10-19 1369
次联选择自定义
element-ui中el-cascader级联选择器多选判断是否是全选
06-28
在Element UI中的`el-cascader`级联选择器组件，如果需要实现多选并判断是否所有选项都被勾选为全选状态，你可以使用`@change`或`@input`事件监听用户的交互。当你获取到`value`（用户选择的值）时，可以通过遍历这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值