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种单例模式
下一篇:
相关文章
-
无相关信息