当你的才华还撑不起你的梦想时,你只能一直前进!

elementUI cascader 级联选择器单选任一项修改

需求:删除单选框,点击文字选择并关闭下拉框

首先为不污染其他级联选择器,需要自定义类名

<el-cascader popper-class="myCascader" ></el-cascader>

然后在样式表里修改样式

复制代码
.myCascader {
  .el-radio__inner {
    top: -18px;
    left: -19px;
    border-radius: 0;
    border: 0;
    width: 170px;
    height: 34px;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
  }
  .el-radio__input.is-checked .el-radio__inner {
      background: transparent;
  }
}
复制代码

在methods里关闭下拉框

    cascaderChange (val) {
      console.log(val)
      if (this.$refs.myCascader) {
        // this.$refs.myCascader.closeVisible = false
        this.$refs.myCascader.dropDownVisible  = false
      }
    },

 

posted @   One'-_-'Piece  阅读(697)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示