el-select 为每一项添加图标

  • Post author:
  • Post category:其他

 <div class="selectbtype">
          <el-select
            v-model="btypeId"
            placeholder="请选择"
            @change="handleSelect"
          >
            <el-option
              v-for="item in btypeArr"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
              <div class="optionlist">
                <img :src="localtionurl + item.photo" alt="" />
                {{ item.title }}
              </div>
            </el-option>
          </el-select>
          <img class="imgbtype" :src="localtionurl + btypeImg" alt="" />
        </div>
.selectbtype {
  position: relative;
  .imgbtype {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 10px;
  }
  .el-select {
    /deep/.el-input--suffix .el-input__inner {
      padding-left: 35px;
    }
  }
}
.optionlist {
  display: flex;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}

效果图


版权声明:本文为qq_40796623原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。