el-cascader 选择任意一级数据,并隐藏选择框

1,792 阅读1分钟
<el-cascader      
    popper-class='self-cader-decision' //自定义class     
    v-model="searchObj.id"       
    :options="searchObj.options"       
    :props="searchObj.customprops" //自定义数据       
    clearable        
    filterable       
    :show-all-levels="false" //输入框中是否显示选中值的完整路径        
    placeholder="请选择"         
    @change="handleChange"     
>
</el-cascader>

根据接口的实际情况,配置自己数据

checkStrictly:true

checkStrictly 是否严格的遵守父子节点不互相关联

boolean类型

默认flase

emitPath:false

emitPath

在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值

boolean类型 
默认true

const searchObj = reactive({
      options : [],
      customprops:{
        value:'id', //选中后值
        label:'name', //显示的文案
        children:'childrenTopics', //后端数据子集字段
        checkStrictly:true, //是否严格的遵守父子节点不互相关联
        emitPath:false, //只返回该节点的值
        expandTrigger: 'hover', //次级菜单的展开方式
      }
 })

通过css隐藏选项前面的选择框

.self-cader-decision{
  .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;
  }
    /* 这个样式针对IE有用,不考虑IE的可以不用管*/
  .el-cascader-panel .el-cascader-node__postfix {
    top: 10px;
  }
}

结果如下图