赞
踩
- <el-cascader
- v-model="selectedKeys"
- <!-- options 指定数据源 -->
- :options="options"
-
- <!-- 悬浮级类上自动展开 -->
- :expand-trigger="'hover'"
- style="width:100%"
-
- <!-- 父级分类选择项发生后触发函数 -->
- @change="change"
-
- <!-- 是否支持清空选项 -->
- clearable
-
- <!-- checkStrictly可以选择任意一级的内容 -->
- :props="{ checkStrictly: true }">
- </el-cascader>
![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
当加入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>
![](https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。