vue 修改 el-cascader 面板的样式

最新推荐文章于 2024-05-30 16:01:07 发布

＊且听风吟

最新推荐文章于 2024-05-30 16:01:07 发布

阅读量1.1w

点赞数 10

分类专栏： # Vue 2.x 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/HH18700418030/article/details/125507208

版权

本文介绍了如何在Vue.js项目中针对Element UI的Cascader组件自定义样式，避免全局影响，实现特定颜色文字选中效果。在部署环境中遇到样式不生效的问题，通过阅读官方文档，发现需在样式根文件中绑定自定义类名，并解决层级覆盖问题，最终成功修改了Cascader面板样式。

摘要由CSDN通过智能技术生成

首先，自定义 el-cascader 的 popper-class 类名，因为设置的样式需要全局设置才生效，使用自定义的类，可以避免影响到其他页面的效果：

<el-cascader v-model="formData.divisionCode" popper-class="pc-sel-area-cascader" style="width:470px" :options="divisionOptions" placeholder="请选择区域">
</el-cascader>

如下：
在这里插入图片描述
接下来，就可以在这个类名里面进行样式设置了。

例如，设置颜色文字选中颜色：

<style lang="less">
.pc-sel-area-cascader {
   
  .el-cascader-node.in-active-path,
  .el-cascader-node.is-active,
  .el-cascader-node.is-selectable.in-checked-path {
   
    color: #4e5ef1