el-cascader当设置了checkStrictly:true属性时，可以选择任意一级的菜单。但是同时设置动态加载的时候。点击前面的radio按钮会出现一个暂无数据的面板

已于 2022-03-01 13:35:36 修改
阅读量2.6k 收藏 4
点赞数 2
文章标签： elementui vue.js 前端
于 2022-03-01 11:55:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44535402/article/details/123202473
版权

el-cascader当设置了checkStrictly:true属性时，可以选择任意一级的菜单。但是同时设置动态加载的时候。点击前面的radio按钮会出现一个暂无数据的面板

当点击radio按钮的时候会出现一个暂无数据的面板。

代码：


 

<el-cascader

   :ref="'cascaderRef' + scope.$index"

  @change="handleChangeCascader('cascaderRef' + scope.$index)"

 ></el-cascader>




handleChangeCascader(refName) {

    const panelRefs = this.$refs[refName].$refs.panel

    panelRefs.lazyLoad(panelRefs.getCheckedNodes()[0])

},

Mr_AaroLi
关注
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3849
vue，element ui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element UI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
el-cascader 可以选择任意一级，并隐藏radio小圆点
Alan_ran的博客
04-21 1006
并且在@change方法里 this.$refs.cascaderHandle.dropDownVisible = false;这样选中后就可以关闭下拉框。然后开启鼠标移动触发 expandTrigger: 'hover'一、开启 checkStrictly : true, 允许选择任意一级节点,二、实现点击文字触发选中事件，加一个插槽，绑定一个函数即可。三、隐藏el-radio小圆点的样式。
el-cascader级联选择器选择任意一个选项详细解决方案
y_w_x_k的博客
09-11 4283
el官方提供了props.checkStrictly = true属性可以取消父子节点强关联来达到选择任意选项的目的； 但是存在两个缺陷： 1.只能点击radio的圈圈进行选择 2.选择完了之后级联选择器不会关闭 经过搜索网上的资料，整合了下面的方案来解决上面两个问题。 首先选择器： <el-cascader :key="cascaderKey" v-model="fCategoryId" :options="option" :props="optio
vue菜单权限之el-cascader-panel自定义角色权限页面-平铺显示+输入模糊搜索+点击定位展开对应的项+全选功能
最新发布
weixin_45408578的博客
07-13 389
el-cascader-panel自定义角色权限页面-平铺显示+实现菜单+按钮区分显示+输入模糊搜索+点击定位展开对应的项
el-cascader动态加载选择时兼容checkStrictly属性并存时的一个空白面板的问题
weixin_38912662的博客
12-29 933
解决懒加载与checkStrictly并存问题
el-cascader级联选择器，去掉radio，点击文字选择节点，支持checkStrictly: true
Kyiiiii的博客
04-18 1432
el-cascader级联选择器，去掉radio，点击文字选择节点，支持checkStrictly: true
element中级联选择器选中任意一项（动态加载数据）
All___Blue的博客
11-25 1145
html部分 <el-cascader class="filter-item" @change="tableAreaSelect" @active-item-change="handleItemChange" :props="props" placeholder="请选择地区" :options="options" v-model="tableAreas" cle
el-cascader级联选择器，checkStrictly: true，去掉一级节点的el-radio圆点
Kyiiiii的博客
04-18 2149
el-cascader级联选择器，checkStrictly: true，去掉一级节点的el-radio圆点
Element-Cascader 级联选择器check-strictly为true时，单选区域的优化
weixin_42493393的博客
09-15 9431
案例背景： 使用vue和element-ui做后台管理页面，实现的是省市区的三级联动，选择区域。 问题：使用单选选择任意一级选项使用此属性时 :props="{ checkStrictly: true }"时，默认的选择区域只有radio一个小圆圈，点击选项文字无效的。 解决方案： 分析页面上渲染出来的element组件结构，找到对应的类名。进行样式的覆盖。关于如何修改框架样式问题，可以看我之前的文章 .el-cascader-menu .el-radio { display: table; ve
el-cascader任意一级选项和懒加载组合使用，选中前面的radio按钮时无法触发懒加载
weixin_46554879的博客
03-23 1659
el-cascader当设置了checkStrictly:true属性时，可以选择任意一级的菜单。但是同时设置动态加载的时候。点击前面的radio按钮会出现一个暂无数据的面板
elementui级联选择器Cascader不触发change事件
q879936814的博客
08-10 7557
使用级联选择器时，需求是选择最后一级，同时选择之前的父级标签，看这个需求明明很简单，人家自带的组件就是这样，但是却一直无法触发绑定的change事件，只有添加props.checkStrictly = true时才可以触发，但是不能实现需求。分析方法：首先组件的功能肯定是没问题的，因为从官网copy下来之后我用原始的数据尝试，完美实现需求。......
Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮
web18296061989的博客
03-08 2180
目标： 1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。 效果图如下： 期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框） 步骤如下： 1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的 代码： <el-cascader :props="{ checkStrictly: true }" popper-class='自定义类名' clearable></el-casc
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3497
vue3，element plus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element plus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
Vue check-strictly=“true“ 报错
weixin_43754284的博客
04-04 2114
vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "checkStrictly". Expected Boolean, got String with value "true".
【记录】记录一下element-ui级联选择器设置了checkStrictly后点击整行都可选中的优化
z13540112421的博客
04-23 483
使用的vue2.7,所以是组合式api方法。
element tree 设置check-strictly=true后，手动重写逻辑实现父子关联
少油少盐不要辣
06-25 450
遇到需求，就是当取消子级为按钮时，父级勾选状态不取消。所以，想了下，打算设置element tree 父子不关联，然后手动重写关联逻辑。
Cascader 级联选择器，解决了暂无数据问题
weixin_45546279的博客
12-19 4807
Cascader 级联选择器 当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 Cascader 级联选择器认识 默认 click 触发子菜单官网介绍:链接 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <...
[element-ui] 级联选择器el-cascader不触发change事件
qq_14993591的博客
01-12 965
官网数据中最后一级没有children。使用官网的数据是可以的。
el-cascader级联选择器选择任意一级
08-16
C知道：对于el-cascader级联选择器，您可以设置`change-on-select`属性为true，以允许选择任意一级。默认情况下，该属性为false，只有当选择完整的级联路径后才会触发change事件。但是，将`change-on-select`设置为true后，您可以在选择任意一级时触发change事件。以下是一个示例： ```html <template> <el-cascader :options="options" :props="props" change-on-select @change="handleCascaderChange" ></el-cascader> </template> <script> export default { data() { return { options: [ { value: '1', label: 'Option 1', children: [ { value: '1-1', label: 'Option 1-1', children: [ { value: '1-1-1', label: 'Option 1-1-1', }, { value: '1-1-2', label: 'Option 1-1-2', }, ], }, { value: '1-2', label: 'Option 1-2', }, ], }, ], props: { value: 'value', label: 'label', children: 'children', }, }; }, methods: { handleCascaderChange(value) { console.log(value); }, }, }; </script> ``` 在上述示例中，将`change-on-select`设置为true后，无论选择到哪个级别，都会触发`handleCascaderChange`方法，并打印选择的值。 希望对您有所帮助！如果有任何其他问题，请随时提问。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值