使用element-ui的el-select下拉框无法完全显示，css样式修改无效

Question

el-select下拉框无法最后一行的内容显示的不全

我想改下拉框的样式，但是使用deep也无法改变

<div style="display: flex;margin-left: 20px" class="car-count-container">
          <el-tag style="height: 40px;display: flex;align-items: center;font-size: 12px">异常次数</el-tag>
          <el-select
                  v-model="countValue" placeholder="请选择"
                  :popper-append-to-body="false"
                  style="width: 230px">
            <el-option
                    class='car-count-option'
                    v-for="item in countOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </div>

//修改总体选项的样式 最外层
.car-count-select{

  margin: 0px;
  border:0px;
  border-radius: 0px;
  height: 500px;
  background: cyan ;
}

//修改单个的选项的样式
/deep/ .el-select-dropdown__item{
  background-color: transparent;
  color:#fff;
}


/deep/ .el-select-dropdown {
  background: #F56C6C;
}

代码

<template>
  <el-container style="padding:0;background: rgb(240, 242, 245);">
    <el-header class="user-table-header-container">
      <div class="user-table-header-search-container">
        <div class='user-table-header-input'>
          <div style="display: flex;">
            <el-tag style="height: 40px;display: flex;align-items: center;font-size: 12px">车牌号</el-tag>
            <el-input style="width: 230px" v-model="codeValue" placeholder="请输入"></el-input>
          </div>
          <div style="display: flex; margin-left: 20px">
            <el-tag style="height: 40px;display: flex;align-items: center;font-size: 12px">选择日期</el-tag>
            <template>
              <el-date-picker
                      v-model="dateRangeValue"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
              </el-date-picker>
            </template>
          </div>

          <div class='entity-button-container'>
            <!--<el-radio-group v-model="radioEntity" style="width: 200px">-->
              <!--<el-radio-button label="0">搜索</el-radio-button>-->
              <!--<el-radio-button label="1">重置</el-radio-button>-->
            <!--</el-radio-group>-->
            <el-button :type="indexSearchBtn===0?'primary':'info'" @click='searchEarlyWarning'>搜索</el-button>
            <el-button :type="indexSearchBtn===1?'primary':'info'" @click='resetEarlyWarning'>重置</el-button>
          </div>
        </div>
      </div>

      <div style="display: flex">
        <div style="display: flex;">
          <el-tag style="height: 40px;display: flex;align-items: center;font-size: 12px">消纳场</el-tag>
          <el-select v-model="eliminationValue" placeholder="请选择" style="width: 230px">
            <el-option
                    v-for="item in eliminationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div style="display: flex;margin-left: 20px" class="car-count-container">
          <el-tag style="height: 40px;display: flex;align-items: center;font-size: 12px">异常次数</el-tag>
          <el-select
                  v-model="countValue" placeholder="请选择"
                  :popper-append-to-body="false"
                  style="width: 230px">
            <el-option
                    class='car-count-option'
                    v-for="item in countOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </el-header>
    <div style="padding: 0 10px 10px 10px;">
      <div class='btn-refresh-container'>
        <el-button type="primary" @click="refreshEarlyWarning">重新计算</el-button>
        <div class='refresh-description'>
          数据最新更新时间：{{refreshTime}}
        </div>
      </div>
    </div>

    <!--<div style="padding: 0 10px 10px 10px;">-->
      <!--<template>-->
        <!--<el-radio v-model="radio" label="1">只看进厂次数>出工地次数</el-radio>-->
        <!--<el-radio v-model="radio" label="2">只看出工地次数>进厂次数</el-radio>-->
      <!--</template>-->
    <!--</div>-->

    <el-main style="padding: 0 10px 0 10px;">
      <el-table
              ref="multipleTable"
              :data="userData.slice((pagination.currentPage-1)*pagination.size, pagination.currentPage*pagination.size)"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              highlight-current-row
              id="table-key"
              default-expand-all
              v-loading="tableLoading"
      >
        <el-table-column v-if="userData.length !== 0" type="selection"></el-table-column>
        <el-table-column
                v-for="(col, index) in cols"
                :prop="col.prop"
                :label="col.label"
                :fixed="col.fixed"
                :key="index"
                :width="col.width"
        >
          <template slot-scope="scope">
            <div>
              {{scope.row[col.prop]}}
            </div>
          </template>
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作"
                width="260">
          <template slot-scope="scope">
            <el-button
                    @click.native.prevent="examineVersion(scope.$index, scope.row)"
                    type="text"
                    size="small">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="table-footer-container">
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.currentPage"
              :page-size="pagination.size"
              :page-sizes="pagination.sizes"
              layout="total, prev, pager, next, sizes, jumper"
              :total="pagination.total">
      </el-pagination>
    </el-footer>

    <el-dialog title="日期" :visible.sync="dialogFormVisible">
      <el-table :data="gridData">
        <el-table-column property="licenseNumber" label="车牌号" width="150"></el-table-column>
        <el-table-column property="leaveTime" label="出厂时间" width="200"></el-table-column>
        <el-table-column property="enterTime" label="进厂时间"></el-table-column>
        <el-table-column property="eliminateLand" label="消纳厂名称"></el-table-column>
      </el-table>
    </el-dialog>

  </el-container>
</template>
<style lang="scss" scoped>
.user-table-header-container {
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
  /*height: 80px !important;*/
}

.user-table-header-title {
  height: 30px;
  background: #409EFF;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 10px;
  color: #ffffff;
}
.user-table-header-search-container {
  display: flex;
  /*justify-content: space-between;*/
  align-items: center;
  /*background: #e6a23c;*/
  height: 50px;
}
.user-table-header-container {
  padding: 0 10px 0 10px;
  height: 100px !important;
  //background: #F56C6C;
}
.user-table-header-input {
  /*width: 200px;*/
  width: 100%;
  /*background: #e6a23c;*/
  overflow: hidden;
}
.table-footer-container {
  /*background: #409EFF;*/
  display: flex;
  box-sizing: border-box;
  padding-top: 10px;
  justify-content: center;
}

.user-table-header-input {
  display: flex;
}

.user-input-description {
  font-size: 13px;
  width: 70px;
  /*background: #409EFF;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entity-button-container {
  /*display: flex;*/
  /*margin-left: 20px;*/
  margin-left: auto;
  /*background: #333333;*/
  width: 160px;
}

.btn-check-item {
  margin-top: 0;
  margin-right: 0;
  /*position: absolute;*/
}

.btn-refresh-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /*background: #F56C6C;*/
  .refresh-description {
    height: 100%;
    /*background: #e6a23c;*/
  }
}

.car-count-container {
  /deep/ .el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
    overflow: scroll!important;
    /*background: #e6a23c;*/
  }
}

/deep/ .el-select,
/deep/ .el-input,
/deep/ .el-input__inner{
  /*background-color:#08164D ;*/
  /*color:#fff;*/
  /*border:0px;*/
  /*border-radius:0px;*/
  /*text-align: center;*/
}

//修改总体选项的样式 最外层
.car-count-select{

  margin: 0px;
  border:0px;
  border-radius: 0px;
  height: 500px;
  background: cyan ;
}

//修改单个的选项的样式
/deep/ .el-select-dropdown__item{
  /*background-color: transparent;*/
  /*color:#fff;*/
}


/deep/ .el-select-dropdown {
  /*background: #F56C6C;*/
}

</style>

Answer 1

<style>有使用scoped属性吗？没有的话，/deep/可能不会生效

.user-table-header-container {
 /deep/ .el-select-dropdown {
   background: #F56C6C;
 }
}

要/deep/包裹在指定类里面

Answer 2

你改的元素不对吧。
.el-scrollbar{
height: 500px;
background: red;
}

Answer 3

组件有scoped的话就不用写在组件里, 在全局css里写下拉框样式, ele的下拉框是直接在body元素下面的, 用组件里的样式找不到的