elementUI样式修改（Cascader 级联选择器）

elementui的问世，大大提高了前端开发的工作效率，但同时也
带给我们不少烦恼。我们要用UI组件就免不了要对它做一些个性化定制需求，所以我们就必须要覆盖element的一些样式

下面是我开发中遇到的实例：

首先引入Cascader级联选择器，效果如图：

很明显这个样式不是我们需要的，那么就需要处理了…

：附上控制台中的html

接下来，我在单页面组件下面新建style，然后改变它的样式

.el-popper .el-cascader-panel .el-cascader-menu .el-scrollbar_ wrap .el-cascader-menu_ list .el-cascader-node{font-size: 14px;padding: 0 20px;position: relative;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color:  #fffff;height: 34px;line- height: 34px;-webkit-box- sizing: border-box;box- sizing: border- box;cursor: pointer;}

刷新后它的样式还是如此

之后我尝试把元素ul,li的class名删掉，直接换成ul li

<style>.el -popper .el-cascader- panel .el-cascader-menu . el-scrollbar_ wrap ul li{font -size: 14px;padding: 0 20px;position: relative;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #fffff;height: 34px;line-height: 34px;-webkit-box-sizing:border- box;box-sizing: border- box;cursor: pointer;}.el-popper .el-cascader- panel .el-cascader-menu .el-scrollbar_ wrap ul li .el-icon-arrow-rightf{position: absolute;top: 50%;left: 85%;transform: translate(- 5e%, -50%);}</style>

注：此处不可加scoped,否则样式不覆盖；为了避免污染全局样式，我个人觉得应该尽可能的找其父元素（愚见望指教）

这样改了之后，奇迹般成功了

虽然成功了，但还是懵懵懂懂的，期待大佬指教…

elementUI样式修改（Cascader 级联选择器）相关推荐

ElementUI中的 Cascader 级联选择器卡顿问题
当数据多的时候可能出现卡顿的情况,在点击小叉号进行删除已经选择的数据的时候,也可能会出现卡顿的情况,在当重置清空数据的时候,使用一下方式或许会避免页面卡顿, let obj = {}obj.stop ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值官网cascader:https://element.eleme.cn/#/zh- ...
Cascader 级联选择器、Select 选择器和date-picker日期选择器的宽度设置
像select选择器的宽度设置一般是这样 <el-select v-model="value" placeholder="请选择" style=" ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
修改element组件库中Cascader级联选择器下拉列表的默认样式
在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped),如果css用到less预处理器,想到的第一个解决办法就是用深度选择器">>>" ...
element-ui中Cascader 级联选择器组件使用(默认选择是value(id)，还想要获取label(name值))
我的需求是一个下拉框选中城市(先选中省-对应市显示-选中显示在下拉框中)注:区不要但是我之前封装了一个三级联动的,所以我需要重新封装一个: cityMap.js const map = {11000 ...
解决cascader级联选择器报错“level“ of null
1. 需求:级联选择器数据与另一文本框有联系,如果文本框有值,则相同的值在cascader的数据中置灰,不可选.如果先选择了cascader的值,再填文本框的值发现两选值相同,则将cascader的选 ...

elementUI样式修改（Cascader 级联选择器）

elementUI样式修改（Cascader 级联选择器）相关推荐

最新文章

热门文章