问题:element的el-cascader组件,如何在选择任意一级的内容的情况下,去掉前面的radio标签?

遇到的问题:

vue项目中需要使用element的el-cascader组件,并且可以选择任意一级的内容。还要去掉前面的radio标签。

问题分析:

element的el-cascader组件级联选择器,通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。但是体验感不强,需要点中小圆圈才可以选中,如果项目中使用了懒加载的话,还需要再点击文字加载下一级,这样子体验感很差。又或者说不需要点radio标签,而是点击文字呢?

解决方法:

直接上代码展示解决方案。

<div class="block">
  <span class="demonstration">单选选择任意一级选项</span>
  <el-form-item label="所在地区" prop="address">
    <el-cascader 
      ref="cascader" 
      v-modle="dataList.address"
      :options="options"
      :props="{ 
        checkStrictly: true,   //1、checkStrictly: true 设置父子节点取消选中关联,从而达到选择任意一级选项的目的。
        expandTrigger:'hover'  //2、expandTrigger:'hover' 解决使用懒加载因为有遮罩层,而无法点击文字选择下一层问题。
      }"
      @change="cascaderChange"
      clearable></el-cascader>
  </el-form-item>
</div>

<script>
data:{
  return{
    dataList:{
      address:""  
    },
    options:[]  //省市区数组集合
  }
},
mounted () {
//第二种js方法:点击文字时自动选中radio标签
  setInterval(function () {
    document.querySelectorAll('.el-cascader-node__label').forEach(el => {
      el.onclick = function () {
        if (this.previousElementSibling) this.previousElementSibling.click()
      }
    })
  }, 1000)
},
methods:{
//所在省市区选择事件
 cascaderChange(val) {
   this.$refs.cascader.toggleDropDownVisible();  //地区选择之后将下拉框界面收起
   console.log(val);  //获取的id值['10001','10011']
 },
}
</script>

<style>
/*第一种css方法:使用css将小圆圈变透明然后覆盖在整个文字上方,点击文字的时候其实是在点击小圈圈。*/
/*以下样式将单选框隐藏,并绝对定位与文字内容一样大小,这样点击时可以点击整行文字*/
.el-cascader-panel .el-radio{
 position:absolute;
 z-index:10;
 padding:0 10px;
 width:132px;
 height:34px;
 line-height:34px;
}
.el-cascader-panel .el-radio__input{
 visibility:hidden;
}
.el-cascader-panel .el-input-node__postfix{
 top:10px;
}
</style>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值