关于element-ui el-cascader 级联选择器 单独选择任意一级选项，去掉单选按钮（记录一下）

最新推荐文章于 2024-06-25 09:45:45 发布
最新推荐文章于 2024-06-25 09:45:45 发布
阅读量1.1k 收藏 5
点赞数 2
文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45753588/article/details/129852977
版权
本文介绍了如何使用Element-UI的el-cascader组件实现单独选择级联选择器中的任意一级选项，并且去掉单选按钮。通过设置`checkStrictly`属性并绑定分类id来实现功能。同时，讲解了如何添加`popper-class`自定义类名以进行样式修改，特别注意在修改样式时不能使用scope，并需在全局样式中指定自定义样式前缀。
摘要由CSDN通过智能技术生成

效果如下：

分类

在这里插入图片描述
代码如下： 单独选择任意一项属性 checkStrictly ， 绑定的是分类 id popper-class自定义类名

             <el-cascader
              v-model="form.cateIds"
              :options="cateList"
               popper-class
最低0.47元/天 解锁文章
我的调皮小妖精…
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮
qq_40184218的博客
08-09 5344
目标： 1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。 效果图如下： 期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框） 步骤如下： 1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的 代码： <el-cascader :props="{ checkStrictly: true }" popper-class='自定义类名' clearable></el-casc
element-china-area-data：Element UI && antd Cascader级联选择器中国省市区三级，二级联动optiondata
02-06
Element UI中国省市区级联数据 安装 npm install element-china-area-data -S 在线示例 使用 import { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDataPlus , CodeToText , TextToCode }...
若依 ruoyi-vue element-ui el-cascader 级联选择器 选择任意一级选项，去掉单选按钮，选中点击后隐藏
Xiaoweidumpb
06-04 627
官方的例子不支持选中后自动关闭，要点击旁边空白，并且单选框太小了。
vue3 层级选择器 el-cascader展示 更多的信息
lzfengquan的博客
06-25 366
cascader 正常情况下可以满足我们所需，一般展示的就是 {label:‘’；value:‘’} 但有时候需要展示更多的信息工用户查看，如下图。此时就需要我们进行一定的改造。css 样式 可自己处理。
Element Plus中Cascader 级联选择器（选择任意一级选项 - 更改下拉框选中方式）
努力的nana
09-15 1756
组件原始选中：选择文字前面的单选按钮 现在更改为：隐藏单选按钮，点击文字进行选中 ① 给弹出内容的自定义类名(popper-class)： <el-cascader v-model="areaValue" :options="areaOptions" :props="areaProps" :teleported="false" separator="-" placeholder="请选择" popper-class="dropDownPanel" @ch
elementui Cascader 级联选择器 选择任意一级选项 可选择父元素
lyq1948的博客
10-07 1293
props可自行配置。
el-cascader 可以选择任意一级，并隐藏radio小圆点
Alan_ran的博客
04-21 741
并且在@change方法里 this.$refs.cascaderHandle.dropDownVisible = false;这样选中后就可以关闭下拉框。然后开启鼠标移动触发 expandTrigger: 'hover'一、开启 checkStrictly : true, 允许选择任意一级节点,二、实现点击文字触发选中事件，加一个插槽，绑定一个函数即可。三、隐藏el-radio小圆点的样式。
el-cascader 级联选择器 选择任意一级选项 点击收起，点击label选中
蒲小若的博客
05-09 2477
https://www.cnblogs.com/whoamimy/p/12488790.html
详解为element-ui的Select和Cascader添加弹层底部操作按钮
10-15
在Element UI中，`el-select`和`el-cascader`是两个常用的组件，用于下拉选择和级联选择。然而，它们默认并未提供在弹出层底部添加自定义操作按钮的功能。本篇文章将深入探讨如何通过自定义方法实现这个功能，以便在...
element-plus---Cascader三级联动地区选择---json数据
08-19
Element Plus是一个流行的Vue.js组件库，它提供了丰富的UI组件，包括Cascader（级联选择器），适用于这种需求。在这个场景中，"element-plus---Cascader三级联动地区选择---json数据" 主题指的是使用Element Plus的...
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
`<el-cascader>`是Element-UI用于创建级联选择器的组件。在示例代码中，我们看到`v-model`绑定到`ruleForm.censusLand`，这使得菜单选择的值可以双向绑定到数据模型。级联菜单的配置项包括`placeholder`（占位提示）...
elementui Cascader 级联选择器 选择任意一级选项
max100c的博客
05-31 1095
//选择任意一级选项 // 仅显示最后一级
关于el-cascader选择任意一级问题
qq_38669865的博客
03-24 605
总结出来就四个字：注意版本！ 下面放两张图片对比一下
Element UI 中使用el-cascader组件，可以选择任意一级的内容并取消单选框
weixin_57156664的博客
09-08 1515
当加入checkStrictly后就会出现单选框的问题，修改样式即可，这里使用的less语法，需要有less依赖；加入样式后如果没有生效，可以放在App.vue中的样式目录下。在Element UI中使用级联选择器,并且设置可以选择任意一级的内容。例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据。
使用Element-UI中的el-cascader 实现可以任意选择一项，以及遇到的坑
m0_61317636的博客
08-03 5666
现在我们要求可以选择任意一项，查阅官方文档 发现 使用 就可以达到我们的效果，但是 注意重点来了...至于原因 大家可以看这个 (13条消息) elementUi Cascader 级联选择器如何选择任意一级，以及所遇到的问题_WhiteSean的博客-CSDN博客_elementui级联选加载一级上边介绍的方法并没有什么卵用，大家只参考原因就行了，方便大家发散思维。既然知道了原因那么解决起来也是事半功倍看一下代码： 最主要的就是上边三句代码，那这三句怎么实现即要隐藏单选框又要把选择器收起呢，
element-ui的el-cascader级联选任意一级去掉单选按钮前面的图标
weixin_47503277的博客
09-02 4385
element-ui的el-cascader级联选任意一级去掉单选按钮前面的图标 1、遇到的问题： vue项目中需要使用element的el-cascader组件，并且可以选择任意一级的内容。还要去掉前面的radio标签。 2、问题分析： element的el-cascader组件级联选择器，通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。但是体验感不强，需要点中小圆圈才可以选中，如果项目中使用了懒加载的话，还需要再点击文字加载下一级，
奇葩功能实现：级联选择框组件el-cascader实现同一级的二级只能单选，但是一级可以多选
yorcentroll的博客
07-11 5920
但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。 但是本人已经不想折腾， 谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！
Element Cascader 级联选择器： 省市区级联可选择任一级，点击文字即选中标签
W
07-09 2109
看官网！看官网！看官网！官网超有用的 -->Cascader 级联选择器 Cascader 级联选择器 通过props.checkStrictly = true来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。 <div class="block"> <span class="demonstration">单选选择任意一级选项</span> <el-cascader :options="options" :...
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、付费专栏及课程。

余额充值