element ui级联选择器Cascader任意单选项,点击就隐藏下拉层选中选项


//控件设置
<el-cascader ref="cascaderMenu"  v-model="formData.parentMenuName" :options="menuTreeData" :show-all-levels="false" 
            @change="MenucascaderSelectChange" :style="{width: '100%'}"
            :props="{value:'menuId',label:'menuName',checkStrictly: true,expandTrigger: 'hover'}" clearable>
 
//添加方法
MenucascaderSelectChange(){
      // 目的是选择之后将下拉界面收起
      this.$refs.cascaderMenu.toggleDropDownVisible();
      //获取最后一个元素
      if(this.formData.parentMenuName.length>0){
        this.formData.parentMenuName = this.formData.parentMenuName[this.formData.parentMenuName.length-1];
      }
    }
 
 
 
<style scope>
  .el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    /* margin-right: 10px; */
    /* right: 10px; */
  }
  .el-cascader-panel .el-radio__input{
  visibility: hidden;  
 /* 隐藏单选框*/
.el-cascader-node__label{
  margin-left: 10px;
}
    /* 针对IE有用*/
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }
</style>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM