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

效果图
el-cascader__点击文字可选中__去掉单选按钮__选中后菜单收起__自定义数据显示在选项中(已测有用)
直接上代码:
注意: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;
      }
  }
}
上一篇:PWA(Progressive Web App)入门系列:Notification


下一篇:vue解决Element-ui中 el-cascader 级联选择器 最后一级数据为空显示暂无数据问题