修改element ui select選擇器 樣式

修改選擇器的下拉框,下拉框是在body標簽的外面所以要設置

:popper-append-to-body="false"

把下拉框放進body里面

 

再自定義類名

popper-class="select-popper"

 .select-popper  .el-select-dropdown__item {
  height: 77px !important;
  line-height: 37px !important;
}

完整代碼

        <el-select v-model="value" placeholder="請選擇" @change="Addresschange" class="select_show"  :popper-append-to-body="false" popper-class="select-popper">
        <el-option
          v-for="item in AddressList"
          :key="item.address_id"
          :label="item.name"
          :value="item.address_id"
        >
          <div class="float_content">
            <div style="float: left">
              {{ item.name }}
            </div>
            <div style="float: right; color: #8492a6; font-size: 13px">
              {{ item.phone }}
            </div>
            <div style="clear: both;display: flex;justify-content: space-between;align-items:center">
              <div>
                {{
                  item.region.province + item.region.city + item.region.region
                }}
              </div>
              <div style="margin-left:10px; color: #8492a6; font-size: 13px">
                {{ item.detail }}
              </div>
            </div>
          </div>
        </el-option>
      </el-select>

 

                                                                                                 

 

 

參考:https://www.jianshu.com/p/6e4e7dd14621