ElementUI，修改el-cascader组件内部展开项的样式_el-cascader 模拟点击展开

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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41