el-cascader__点击文字可选中__去掉单选按钮__选中后菜单收起__自定义数据显示在选项中(已测有用)

28 篇文章 0 订阅

效果图
在这里插入图片描述
直接上代码:
注意:css样式一定要全局设置,不要写在scoped下(否则没效果)

<el-cascader
            v-model="form.classify"
            ref="cascader"
            :options="dataList"
            :props="defaultProps"
            clearable
            popper-class="cascader"
             @change="onSubmit"
          ></el-cascader>
 

//在此处定义popper-class,是因为下面设置的样式需要全局设置才生效,使用定义的类,将不会影响其他页面的效果


export default {
    data() {
      return {
        formInline:{classify:""},   
        dataList: [{
                  id:1,
                  name:"haha"
                  }],
       defaultProps: {
	        value: "id",
	        label: "name",        
	        expandTrigger: 'hover' ,        
	        checkStrictly: true,
	        emitPath: false,
         }
      }},
      methods: {
	      onSubmit() {//选中之后,自动关闭菜单项
	        this.$refs.cascader.toggleDropDownVisible();
	      }
    }
 }

// 此处dataList并不是按照el-cascader定义的value,lable定义的属性名,所以此处要做转换


// 级联选择器el-cascader,通过点击label文字部分选中
.cascader {
  .el-cascader-panel{
     .el-radio{
      width: 100%;
      height: 100%;
      z-index: 10;
      position: absolute;
      top: 10px;
      right: -10px;
      }
      .el-radio__input{
        visibility: hidden;  //隐藏单选框,不隐藏就不用设置
      }
      .el-cascader-node__postfix{
        top: 10px;
      }
  }
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值