element Cascader 级联选择器 选择任意一级选项 以及点文字即可选中前方对应的单选按钮

element Cascader 级联选择器 选择任意一级选项 以及点文字即可选中(去掉单选按钮)

目标效果

有两级的情况,想只选一级,就只选一级

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ef58787a775a416cba77d816ec0fb320.png

遇到的问题:

1、使用 使用官方案例的 (多选 单选框)直接点击 小圆点,点击文字没有效果。

2、想直接点击文字可以可选中前方对应的单选按钮,如果有三级也随便打开三级

解决方案:

解决可以任选一个选项方法:

bash 复制代码
// 使用官方提供的 checkStrictly 参数即可
 
checkStrictly: true
 
// 案例:
 
 <el-cascader
    :options="options"
    :props="{ checkStrictly: true }"
    clearable> </el-cascader>

解决点击文字即可选中,并移除单选按钮:

bash 复制代码
// 当使用了 checkStrictly 就会出现单选按钮,使用样式修改即可,
<style lang="less" >
    .el-cascader-panel .el-radio{
	    position: absolute;
	    width: 100%;
	    left: 9px;
    }

</style>

注意

1、这里样式一定是less语法,vue项目需要 npm install less less-loader -s 安装两个依赖才能生效。

2、一定不要添加 scoped

相关推荐
接着奏乐接着舞2 分钟前
react hooks
前端·javascript·react.js
踢球的打工仔2 分钟前
前端html(3)
前端·算法·html
IDOlaoluo2 分钟前
nginx-sticky怎么用 Nginx 负载均衡添加 sticky 模块完整步骤
前端·chrome
接着奏乐接着舞4 分钟前
react redux 分组
前端·javascript·react.js
IT_陈寒8 分钟前
Vue 3.4 性能优化揭秘:这5个Composition API技巧让我的应用提速40%
前端·人工智能·后端
脾气有点小暴8 分钟前
Vue2 与 Vue3 核心差异深度解析
javascript·vue.js
行走的陀螺仪10 分钟前
实时通信底层原理深度剖析:短轮询、长轮询与WebSocket的本质差异
前端·网络·websocket·网络协议
大猩猩X11 分钟前
vue vxe-gantt 甘特图实现产品进度列表,自定义任务条样式和提示信息
前端·javascript·甘特图·vxe-ui·vxe-gantt
一字白首12 分钟前
Vue 进阶,生命周期 + 工程化开发
前端·javascript·vue.js
蒲公英源码16 分钟前
基于PHP+Nginx+Redis+MySQL社区生活服务平台
javascript·vue.js·mysql·php