<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;
}
}
结果如下图