当前位置:   article > 正文

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

cascader elelmentplus 组件 选择任意一级数据

在Element UI中使用级联选择器,并且设置可以选择任意一级的内容

  1. <el-cascader
  2. v-model="selectedKeys"
  3. <!-- options 指定数据源 -->
  4. :options="options"
  5. <!-- 悬浮级类上自动展开 -->
  6. :expand-trigger="'hover'"
  7. style="width:100%"
  8. <!-- 父级分类选择项发生后触发函数 -->
  9. @change="change"
  10. <!-- 是否支持清空选项 -->
  11. clearable
  12. <!-- checkStrictly可以选择任意一级的内容 -->
  13. :props="{ checkStrictly: true }">
  14. </el-cascader>

解决方案:

当加入checkStrictly后就会出现单选框的问题,修改样式即可;这里使用的less语法,需要有less依赖,加入样式后如果没有生效,可以放在App.vue中的样式下

  1. <style lang="less">
  2. .el-cascader-panel .el-radio {
  3. width: 100%;
  4. height: 100%;
  5. z-index: 10;
  6. position: absolute;
  7. top: 10px;
  8. right: 10px;
  9. }
  10. .el-cascader-panel .el-radio__input {
  11. visibility: hidden;
  12. }
  13. .el-cascader-panel .el-cascader-node__postfix {
  14. top: 10px;
  15. }
  16. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/276402
推荐阅读
相关标签
  

闽ICP备14008679号