用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 1247
Cascader级联选择器只展示后端返回的前两层
element-ui中 Cascader 级联选择器 动态加载
weixin_38371427的博客
12-02 303
第一步：添加 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 482
若只需显示两个层级，加入以下代码，处理数据。当使用树形选择时，如何控制显示的层级数？当未设置时，完全显示，共3个层级。处理之后：只显示两层。
关于Vue中涉及到大量数据的级联菜单树状结构的数据多选勾选页面卡顿卡死问题
qq_38828542的博客
07-17 360
提示：放弃el-cascader,改用select + tree来实现，放弃element，改用原生tree配合el-select。本人使用的vue2.x，查看文档属性方法，灵活更加需求写逻辑，目标是不卡死页面。
记录element-ui级联选择器，二级三级列表无法显示的解决办法
qq_45654741的博客
08-12 1631
<!-- 选择商品分类的级联选择框 --> <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 4612
测试提了个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 741
按照官网给的教程使用，当级联选择器内容需要动态变化时，会爆出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 1139
<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 5374
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 7248
在官方文档给出的示例中，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 3438
.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 8794
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 1370
次联选择自定义
element-ui中el-cascader级联选择器多选判断是否是全选
06-28
在Element UI中的`el-cascader`级联选择器组件，如果需要实现多选并判断是否所有选项都被勾选为全选状态，你可以使用`@change`或`@input`事件监听用户的交互。当你获取到`value`（用户选择的值）时，可以通过遍历这个数组，检查每个元素的状态来判断是否全选。 以下是一个简单的示例： ```html <template> <el-cascader v-model="selectedValues" :options="options" multiple @change="checkAllSelected" ></el-cascader> </template> <script> export default { data() { return { selectedValues: [], // 存放用户选择的值 options: ... // 你的级联选项数据 }; }, methods: { checkAllSelected(values) { if (values.length > 0) { let allChecked = true; for (const value of values) { if (!value.checked) { allChecked = false; break; } } this.isAllSelected = allChecked; } else { this.isAllSelected = false; } } }, computed: { isAllSelected() { return this.selectedValues.every(value => value.checked); } } }; </script> ``` 在这个例子中，当`@change`触发时，`checkAllSelected`方法会被调用，检查`selectedValues`数组中的所有元素是否都有`checked`属性为`true`。`isAllSelected`计算属性会根据这个结果更新，表示是否全选。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值