Cascader 级联选择器 选择任意一级选项,去掉单选按钮。
这兄弟文章写的可以,查了一堆文章,基本搞完才发现。
官方的例子不支持选中后自动关闭,要点击旁边空白,并且单选框太小了。
<el-form-item label="所属地域" prop="areaCode">
<el-cascader
style="width: 100%"
ref="cascader"
v-model="form.areaCode"
:options="tzSysTreeDictOptions"
@change="handleCascaderChange"
:props="{ expandTrigger: 'hover', label: 'name' ,emitPath: false,checkStrictly: true }"
placeholder="选择所属地域"
/>
</el-form-item>
handleCascaderChange(){
this.$refs.cascader.dropDownVisible = false;
},
全局样式,他们文章样式有问题,会导致el-radio-group 组件的单选框也消失
//el-cascader 单选框不显示,点击即选中
.el-cascader-node .el-radio__inner {
border-radius: 0;
border: 0;
width: 170px;
height: 34px;
background-color: transparent;
cursor: pointer;
box-sizing: border-box;
position: absolute;
top: -18px;
left: -19px;
}
.el-cascader-node .el-radio__input.is-checked .el-radio__inner {
background: transparent;
}