第 2 节：基础扩展 - 下拉弹窗常用原生属性

本节给 el-select 增加弹窗相关配置，理解控制下拉面板行为的属性，重点都是控制弹出层。

核心：el-select 的下拉面板底层是 el-popover，很多属性是透传给 popover 的

修改 SelectDemo.vue

复制代码

<template>
  <div class="demo-box">
    <h3>el-select 弹窗常用属性</h3>
    <!--
      popper-class：给下拉弹窗单独加css类，用来修改弹窗样式
      popper-append-to-body：是否把弹窗DOM挂载到body（默认true，防止父元素overflow裁剪弹窗）
      dropdown-height：下拉面板最大高度，超出滚动
      placeholder：提示文字
      clearable：清空按钮
    -->
    <el-select
      v-model="value"
      placeholder="请选择"
      popper-class="my-select-popper"
      :popper-append-to-body="true"
      dropdown-height="200px"
      clearable
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
// 多加几条数据，用来测试滚动效果
const options = ref([
  { label: '选项1', value: '1' },
  { label: '选项2', value: '2' },
  { label: '选项3', value: '3' },
  { label: '选项4', value: '4' },
  { label: '选项5', value: '5' },
  { label: '选项6', value: '6' },
  { label: '选项7', value: '7' },
])
</script>

<style scoped>
.demo-box {
  padding: 30px;
}
</style>

<!-- 注意：popper挂载到body，scoped样式无法生效，所以写在外面 -->
<style>
.my-select-popper {
  background-color: #fafafa;
}
</style>

本节知识点

popper-class：给下拉弹窗添加自定义类，⚠️不能写在 scoped 样式里，因为弹窗 DOM 在 body 下，不在当前组件 DOM 树
popper-append-to-body：
- true：弹窗 DOM 挂载到 body。解决父容器 overflow:hidden 截断下拉框的问题（默认 true）
- false：弹窗挂载在当前组件 DOM 内；父容器 overflow 会裁掉弹窗
dropdown-height：下拉面板最大高度，选项超过高度会出现滚动条
clearable：选中后显示清空图标，点击清空选中值

测试任务

点开下拉，查看下拉面板背景是否变成 #fafafa
滚动下拉列表，超过 200px 高度是否出现滚动条
选中一项，是否出现清空按钮，点击清空能否重置 value
可以尝试把 popper-append-to-body 改成 false，给外层 .demo-box 添加 overflow:hidden，观察弹窗是否被裁剪