ElementUI Select选择器下拉框样式修改

Select选择器下拉框样式无法修改原因通过Dom元素可以发现，官方Select选择器下拉框是直接插入body标签中，与最外级div同级，所以在Vue中无论怎么写css都无法覆盖到下拉框样式。在ElementUI官方文档中，查找到一个属性：popper-append-to-body（默认值是 true）。在Select选择器上，添加:popper-append-to-body=“false”&lt

不想当程序汪的第N天

9002人浏览 · 2020-10-12 14:07:14

不想当程序汪的第N天 · 2020-10-12 14:07:14 发布

Select选择器下拉框样式无法修改原因

通过Dom元素可以发现，官方Select选择器下拉框是直接插入body标签中，与最外级div同级，所以在Vue中无论怎么写css都无法覆盖到下拉框样式。
在这里插入图片描述

在ElementUI官方文档中，查找到一个属性：popper-append-to-body（默认值是 true）。

在这里插入图片描述
在Select选择器上，添加

:popper-append-to-body=“false”

<el-select v-model="tableData[scope.$index].type"
           placeholder="请选择"
           :popper-append-to-body="false"
           popper-class="select-popper"
           @change="showTableDate(scope)">
  <el-option
    v-for="item in 4"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>