修改element组件库中Cascader级联选择器下拉列表的默认样式

在保证不影响其他页面中Cascader样式的情况下(首先就不能删除scoped)，如果css用到less预处理器，想到的第一个解决办法就是用深度选择器">>>"

>>> .el-select-dropdown {background-color: #23454b;color: red;}

然鹅发现并不起作用~
如果用到的是sass预处理器，可以用深度选择器"/deep/“或者”::v-deep"（有时候"/deep/“不好使，换成”::v-deep"就好使了，不明白为什么，欢迎大佬们评论区指教）

::v-deep .el-select-dropdown {background-color: #23454b;color: red;}/deep/ .el-select-dropdown {background-color: #23454b;color: red;}

然鹅，还是不起作用
经过某qq学习群内大佬们的一番讨论，最后发现官方文档给出一个属性popper-class，可以自定义一个类名加到Cascader选择器组件上

<el-cascader class="search-train-name"v-model="treeValue":options="options"@change="handleChange"placeholder="部门"popper-class="train-tree"></el-cascader>

这里要注意！这个样式不能写在之前有scoped的内联样式中，需要再写一个style样式表，因为在浏览器审查元素时你会发现级联选择器的下拉列表不在app作用域下。

<style lang="scss" >
// 级联选择器样式
.train-tree {background-color: #23454b;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #fff;line-height: 20px;border: none;box-shadow: 5px 10px 12px 2px rgba(0, 0, 0, 0.27);}
</style>

有什么理解不恰当的地方望大佬评论区指正！

修改element组件库中Cascader级联选择器下拉列表的默认样式相关推荐

element-ui中Cascader 级联选择器组件使用(默认选择是value(id)，还想要获取label(name值))
我的需求是一个下拉框选中城市(先选中省-对应市显示-选中显示在下拉框中)注:区不要但是我之前封装了一个三级联动的,所以我需要重新封装一个: cityMap.js const map = {11000 ...
Element-UI中Cascader 级联选择器使用
Element-UI的级联组件官方文档 <el-cascaderv-model="value":options="options":props=" ...
element组件库中table自定义分页效果
1.在data中设置初始值 // 页数页码search: { offset: 1, // 当前页limit: 10, // 条数total:0, //总数}, 2.设置获取后的数据分配 :data= ...
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值官网cascader:https://element.eleme.cn/#/zh- ...
elementUI样式修改（Cascader 级联选择器）
elementui的问世,大大提高了前端开发的工作效率,但同时也带给我们不少烦恼.我们要用UI组件就免不了要对它做一些个性化定制需求,所以我们就必须要覆盖element的一些样式下面是我开发中遇到 ...
vue + element 顶部二级菜单_揭秘vue/react组件库中5个quot;作者不造的轮子quot;
点击上方"前端公虾米"关注最新前端资讯来源: 铁皮饭盒https://juejin.im/post/5d89cd156fb9a06acb3ee19e ? 这五个轮子其实是5个纯j ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
axure日期选择器组件_Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用
在vue内部初始化时会为每个组件实例挂载一个this._events私有的空对象属性: vm._events = Object.create(null) // 没有__proto__属性这个里面存放 ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...

修改element组件库中Cascader级联选择器下拉列表的默认样式

修改element组件库中Cascader级联选择器下拉列表的默认样式相关推荐

最新文章

热门文章