Element UI 中使用el-cascader组件，可以选择任意一级的内容并取消单选框

当加入checkStrictly后就会出现单选框的问题，修改样式即可，这里使用的less语法，需要有less依赖；加入样式后如果没有生效，可以放在App.vue中的样式目录下。在Element UI中使用级联选择器,并且设置可以选择任意一级的内容。例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据。

像鱼不是雨

2042人浏览 · 2023-09-08 20:13:09

像鱼不是雨 · 2023-09-08 20:13:09 发布

在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中的样式下

<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>