当前位置: 首页> 汽车> 行情 > 智能建站技术_网站设计技巧_网站备案信息查询_网络电商推广方案

智能建站技术_网站设计技巧_网站备案信息查询_网络电商推广方案

时间:2025/7/12 14:21:06来源:https://blog.csdn.net/wkj001/article/details/144285521 浏览次数: 0次
智能建站技术_网站设计技巧_网站备案信息查询_网络电商推广方案

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

  • 目标效果
  • 遇到的问题:
  • 解决方案:
    • 解决可以任选一个选项方法:
    • 解决点击文字即可选中,并移除单选按钮:
  • 注意

目标效果

有两级的情况,想只选一级,就只选一级
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ef58787a775a416cba77d816ec0fb320.png
在这里插入图片描述

遇到的问题:

1、使用 使用官方案例的 (多选 单选框)直接点击 小圆点,点击文字没有效果。
2、想直接点击文字可以可选中前方对应的单选按钮,如果有三级也随便打开三级

解决方案:

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

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

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

// 当使用了 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

关键字:智能建站技术_网站设计技巧_网站备案信息查询_网络电商推广方案

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: