element-ui ：Cascader级联选择器相关问题

1.Cascader级联选择器高度问题

• 问题描述
  element新版本级联选择器当循环数据过多时，下拉框很长，会铺满整个屏幕。

• 决解方法
  1. 在全局css中设置

  这种方法会固定所有级联选择器的高度
  使用场景：1.所有页面级联选择器高度都一样 2.只有一个级联选择器

  .el-cascader-menu{
     height: 400px;
   }
  

  2、在使用级联选择器的页面单独设置

  <style>
  .el-cascader-panel{
    height: 400px!important
  }
  </style>
  

2.Cascader 选择任意一级选项组件去掉前面圆圈

• 问题描述
  element新版本级联选择器当change-on-select=true时，前面会出现单选框

• 解决方法

  /* 级联选择器el-cascader，通过点击label文字部分选中 */
  .el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: -10px;
  }
  	
  /* 隐藏单选框，不隐藏就不用设置 */
  .el-cascader-panel .el-radio__input {
    visibility: hidden;
  }
  
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }
  

3.Cascader 去掉单选框后点击文字选中并关闭

 <el-cascader ref="myCascader"
              @change="parentCateChange"
              expandTrigger="hover"
              change-on-select></el-cascader>

  parentCateChange () {
        // 选择之后将下拉框关闭
      	/*   点击最后一级才关闭下拉框
    	 let node = this.$refs.myCascader.getCheckedNodes()[0];
      	 // 判断是否是最后一级
        !node.hasChildren&&
        this.$refs.myCascader.toggleDropDownVisible(); 
       	 */
        // 点击哪一级都关闭
       this.$refs.myCascader.toggleDropDownVisible()
    }

4. 2 、3问题整合，二次封装Cascader

• 实现的效果
  隐藏单选框,点击文字选中并关闭

  // myCascader.vue
  
  <template>
    <el-cascader
      	ref="myCascader"
      	expandTrigger="hover"
     	    :options="cascaderOptions"
    	    :props="cascaderProps"
          @change="cascaderChange"
  ></el-cascader>
  </template>
  
  <script>
  	export default {
   	   props: {
    	 	 cascaderOptions: {
    		      type: Array, // 数据data
   		   },
   		   cascaderProps: {
    		      type: Object,  //自定义类型参数
  		    }
  	    },
  	   methods:{
  		    cascaderChange(){
  		     // 选择之后将下拉框关闭
    	 	    /*   点击最后一级才关闭下拉框
  	  	      let node = this.$refs.myCascader.getCheckedNodes()[0];
    			  // 判断是否是最后一级
      		    !node.hasChildren&&
     	 	    this.$refs.myCascader.toggleDropDownVisible(); 
     	 	     */
     	 	     // 点击哪一级都关闭
     	 	      this.$refs.myCascader.toggleDropDownVisible()
     	 	     
   		   }
  	   }
  	};
  </script>
  
  <style>
  .el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 10px;
    right: -10px;
  }
  	
  /* 隐藏单选框，不隐藏就不用设置 */
  .el-cascader-panel .el-radio__input {
    visibility: hidden;
  }
  
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }
  </style>
  
  

• 引用

  //引用
     <my-cascader :cascaderOptions="data" :cascaderProps="props"></my-cascader>
     /*data为数据源
     props为自定义参数*/
     props:{
   	     label: "label", 
     	     value: "value",
           children: "children",
    	   //以上3 默认情况可以不写
     		 checkStrictly: true, //这个必须有,取消上下级联动
  },