Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮

最新推荐文章于 2024-03-18 16:46:16 发布
VIP文章 最新推荐文章于 2024-03-18 16:46:16 发布
阅读量5.1k 收藏 9
点赞数 1
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40184218/article/details/119536046
版权

目标：
1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。

效果图如下：

在这里插入图片描述

期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框）

步骤如下：

1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的
代码：

<el-cascader :props=
最低0.47元/天 解锁文章
胜玲龙
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3136
vue3，element plus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element plus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
element的多级选中_elementUI级联选择器可以选择任意一级选项
weixin_39712821的博客
12-22 3428
这个是elementui官网级联选择器的地址，其中选择任意一级选项的项目是这样的这样的话效果是实现了，但是存在两个问题：1、只能点击圆圈才能选中，点击文字 label 没有效果；2、点击圆圈后理想是自动收起下拉，但这个是点击下拉框之外的地方才可以收起。解决办法如下，但是原理不太清楚(很惭愧，先记录下吧)1、点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法...
Element UI级联选择器 多选模式下，实现同一父级下最多只能选中一个子级
qq_44748911的博客
02-22 4032
Element UI级联选择器 在多选模式下，实现同一父级下最多只能选中一个子级
element-ui｜el-cascader 默认选中高亮第一层级的某个选项
最新发布
ccqq441的博客
03-18 420
需求要求点击级联选择器，展开下拉选项时，第一级的某个选项被默认选中高亮。如果需要展示的值在选项列表中比较靠下的位置，选项会高亮，但子节点不会自动展开。如果展示的值由后端返回，那么返回值格式应为：['组件']试了下需要手动调一次expandNodes。
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的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。 效果预览 install 安装 npm i @vueblocks/elp-cascader --save # or yarn add @vueblocks/elp-cascader 全局调用 在main.js中写入下面的代码 import '@vueblocks/elp-cascader/lib/elp-cascader.css' import ElpCascader from '@vueblocks/cascader' Vue.use(ElpCascad
ele-multi-cascader:ElementUI-based 多选级联选择器
05-10
Multi-Cascader 概述 由于elementUI 的级联选择器暂不支持多选，因此基于elementUI开发此组件，所有的样式class都是使用 elementUI 原样式，基本可无副作用的引入项目使用，有任何问题欢迎发布 issue，我会在看到第一时间回复大家。 如果觉得组件还不错的话 不要吝啬你的 star 哦~ 2020-03-03 更新 TIP：当前包基于 elementUI 2.4.11 开发，安装之后很有可能出现与使用的版本不兼容的情况，由于版本更新频繁加上搬砖任务繁重，没法为每个版本做兼容。强烈建议大家直接Copy源码食用，可随意做样式修改，源码结构比较简单，修改无需太多成本 : ) 修复中样式错乱的问题 在v2.2.5之后将组件CSS打包到输出js文件中，使用时无需单独引用包中CSS文件 2019-04-18 更新 由于IE的兼容性问题比较复杂，需要结合 babe
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=
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
热门推荐
风间琉璃c
03-24 2万+
el-cascader 动态加载选项 以及编辑时数据回显问题
关于element-ui el-cascader 级联选择器 单独选择任意一级选项，去掉单选按钮（记录一下）
兔子骑着乌龟跑
03-30 1070
代码如下： 单独选择任意一项属性 checkStrictly ， 绑定的是分类 id popper-class自定义类名。修改样式：不能加 scope 也可以放在全局样式上，要修改的样式前面要加上自定义的样式名。
el-cascader级联选择器的一级单选二级多选
ingenuou_的博客
07-14 5416
el-cascader级联选择器的一级单选二级多选
el-cascader
神zhi殇的博客
10-08 707
cascader默认会加载下个层级的（子层级会执行调用），并选中状态 ==> ok。el-cascader + lazy + multiple + 反显数据。使用了其他的方法，还是没有解决，暂时搁置了。如果el-cascader是异步的单选。，适用于数据量较大的场景。，回显的时候有问题。
country-data:基于elementUI的Cascader 级联选择器的城市数据
05-14
country-data 基于elementUI的Cascader 级联选择器的城市数据 用法： 参考链接：
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 } from 'element-china-area-data' 服务端用法： const { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDa
Ant Desing 级联选择 自定义 options 中 label name children 的字段
qq_44766377的博客
04-15 1172
前几天写了个级联选择，由于后台返回的数据 与组件的自定义匹配不吻合 所以得自定义 匹配字段 fieldnames属性可以解决此问题 由于怕忘记所以这里记录一下其用法 label 是匹配显示的字段 value是其返回值 children是选项的 子选项 能使组件遍历到子选项 ...
elemenet-plus级联选择器（el-cascader）一级单选 二级三级多选+hover弹窗样式修复+
XIAO_A_fighting的博客
01-05 3122
此时的v-model值为一个数组，数组的第一项则为一级的id，第二项则为二级的id…最近的需求需要实现级联选择器的一级只支持单选，二三级可以支持多选。对于原生的这个组件来说，并没有这个功能，所以需要自己在组件上进行二次封装。
element+plus级联表格父级子级选择
Auaaa的博客
02-16 2011
使用this.$refs.selectTable.toggleRowSelection(j, true);去勾选父级时，会将子级即子级以下的全部勾选；但是我想要的只是勾选父级，但是又不想去除勾选父级时，勾选子级的功能！解决思路，勾选父级时现将父级以下的全部子级取消勾选，再将原本勾选了的一个一个勾选！
elementUi Cascader 级联选择器如何选择任意一级，以及所遇到的问题
fuhegegnw的博客
06-15 1万+
1.拿到需求要实现级联选择器并且可以选择任意一级。运用elementUi 的cascader 组件，这个组件默认情况下是严格遵守父子节点互相关联的。要实现可以选择任意一级，那就要给任意一级设置可选择属性。官网提供的:props="{ checkStrictly: true }"解除父子节点互相关联。 2.问题来了。。。 设计师不想要前面的单选按钮，并且直接点击lable即可选中效果。 （1）想办法把单选按钮拿掉，第一时间想到的办法就是css将其隐藏 .el-radio { color: #606266
antdesginVue VUE3.0 Cascader 级联选择省市区（县）镇四级联动 动态加载数据（组件封装）
我只是个很菜的前端
12-03 2358
antdesginVue VUE3.0 Cascader 级联选择省市区（县）镇四级联动 动态加载数据（组件封装）
el-cascader级联选择器单选/多选根据接口懒加载动态获取数据
国服可爱玩家的BLOG
04-20 6353
在Vue项目中，使用elment ui 中 el-cascader 级联选择器，级联选择器每一级的内容对应不同的接口，因此我们要采用懒加载的形式实现对数据的动态获取。 主要思路：通过 lazy 开启动态懒加载，并使用 lazyLoad 来设置加载数据源的方法。lazyLoad 方法有两个参数，第一个参数 node 为当前点击的节点，第二个 resolve 为数据加载完成的回调(必须调用)。 以下先介绍el-cascader级联选择器单选根据接口懒加载动态获取数据 <template> &
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`方法，并打印选择的值。 希望对您有所帮助！如果有任何其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值