element-ui的el-cascader级联选任意一级去掉单选按钮前面的图标

element-ui的el-cascader级联选任意一级去掉单选按钮前面的图标
1、遇到的问题:
vue项目中需要使用element的el-cascader组件,并且可以选择任意一级的内容。还要去掉前面的radio标签。
2、问题分析:
element的el-cascader组件级联选择器,通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。但是体验感不强,需要点中小圆圈才可以选中,如果项目中使用了懒加载的话,还需要再点击文字加载下一级,这样子体验感很差。又或者说不需要点radio标签,而是点击文字呢?
3、解决方法
(1) checkStrictly: true, //1、checkStrictly: true 设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
(2) expandTrigger:‘hover’ //2、expandTrigger:‘hover’ 解决使用懒加载因为有遮罩层,而无法点击文字选择下一层问题

<el-cascader
style=“width:100%”
@change=“selectedDeptId”
:show-all-levels=“false”
collapse-tags
v-model=“form.deptId”
:options=“groupList”
:props="{value:‘id’,label:‘label’,cildren:[{value:‘id’,label:‘label’,cildren:[{value:‘id’,label:‘label’,cildren:[]}]}],checkStrictly: true, expandTrigger:‘hover’}"
/>

methods: {

cascaderChange(val) {
  this.$refs.cascader.toggleDropDownVisible()
  console.log(val)
},

}

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值