素材巴巴 > 程序开发 >

Cascader级联选择器的优化(高度优化 选择任意级优化)

程序开发 2023-09-06 17:12:00

elementui版本:2.15.5

1.解决高度问题

在引入cascader级联选择器后,会导致整个级联选择器高度占满页面的情况,我们只需在全局样式中加上如下代码固定下高度即可

/*解决高度太高的问题*/
 .el-scrollbar__wrap {height: 300px;
 }

2.如果想使选择器能够选择任意一级的选项,则需要进行如下操作:

checkStrictly: true

此时添加完后却又出现了另一个问题:选择器中每一项中都带有一个圆形按钮,而且只有点击圆形按钮才能实现选中,体验极差

.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-radio__input.is-checked .el-radio__inner {background: transparent;
 }

 应用完样式后又发现选择器在选择完选项后不会自动隐藏了(必须手动点击空白处)

 此时则实现了:1.选择器可选择任意一项        2.在选择任意一项时,下拉列表都会隐藏


标签:

上一篇: 7种单例模式 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。