ElementUI，修改el-cascader组件内部展开项的样式

最新推荐文章于 2025-03-11 14:30:43 发布

过期了的小朋友

最新推荐文章于 2025-03-11 14:30:43 发布

阅读量1.4k

点赞数 9

文章标签： elementui 前端 javascript vue.js css 前端框架 ecmascript

本文链接：https://blog.youkuaiyun.com/insist_LJJ/article/details/135358407

版权

本文介绍了如何在ElementUI中修改el-cascader组件的展开项样式，尤其是在移动端下确保下拉框宽度不超过屏幕宽度。通过使用popper-class属性，可以避免全局样式污染，实现特定组件样式的定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ElementUI，修改el-cascader组件内部展开项的样式

在 Element UI 中，下拉弹窗是通过在整个 body 标签末尾动态添加 div 来实现的。通常情况下，要修改这些弹窗的样式，我们需要定义全局样式规则。但是为了避免全局样式的污染，我们可以采用一个解决办法：为组件添加自定义的 popper-class 属性。这样，我们就能够针对特定的组件设置自定义样式，而不会影响到全局的样式，确保我们的修改只作用于特定的组件而非整个页面。

图片的效果是在移动端下下拉框展开的宽度不会超过屏幕的宽度
在这里插入图片描述

<template>
<div>
<el-cascader
    placeholder="请选择去向"
    v-loading="destnaLoading"
    ref="foo"
    v-model="ruleForm.destination"
    :options="optionsArea"
    :props="getProps"
    size="large"
    popper-class="pc-sel-area-cascader"
    @change="desChange"
 />

</div>
</template>

<script >
export default {};
</script>

/** style不能设置scoped,如果设置scoped样式不糊生效/
<style lang="less" >
.pc-sel-area-cascader {
  max-width: 100vw;
}
.pc-sel-area-cascader[x-placement^="bottom"] .popper__arrow {
  display: none;
}
.pc-sel-area-cascader .el-cascader-menu {
  min-width: unset;
  width: 136px;
  font-size: 12px;
}

.pc-sel-area-cascader .el-cascader-node {
  padding: 0 10px 0 10px;
}
</style>