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

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>

从Dom元素中可以看出，这次下拉框元素被直接插入到 el-select 标签内，可以编写css去覆盖样式了。