效果图
直接上代码:
注意: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;
}
}
}