在Element UI中使用级联选择器,并且设置可以选择任意一级的内容
<el-cascader
v-model="selectedKeys"
<!-- options 指定数据源 -->
:options="options"
<!-- 悬浮级类上自动展开 -->
:expand-trigger="'hover'"
style="width:100%"
<!-- 父级分类选择项发生后触发函数 -->
@change="change"
<!-- 是否支持清空选项 -->
clearable
<!-- checkStrictly可以选择任意一级的内容 -->
:props="{ checkStrictly: true }">
</el-cascader>
解决方案:
当加入checkStrictly后就会出现单选框的问题,修改样式即可;这里使用的less语法,需要有less依赖,加入样式后如果没有生效,可以放在App.vue中的样式下文章来源地址https://www.toymoban.com/news/detail-767335.html
<style lang="less">
.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;
}
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
</style>
文章来源:https://www.toymoban.com/news/detail-767335.html
到了这里,关于Element UI 中使用el-cascader组件,可以选择任意一级的内容并取消单选框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!