el-select添加icon阿里巴巴图标以及动态添加到value值 、icon图标颜色更改

 

 

html部分

<el-select v-model="value" placeholder="2*2" @change="changeSize">
        //input前添加图标  需要定位
          <i
            slot="prefix"
            class="iconfont icon-a-7Dsifenping"
            style="position: absolute; top: 27%; left: 20%; margin-left: 10px"
          />
        
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >

        //动态绑定图标，判断value值选择图标  图标位置
            <span style="float: left">
              <i
                :class="
                  item.value === 12
                    ? 'iconfont icon-a-7Dsifenping'
                    : item.value === 24
                    ? 'iconfont icon-a-7Ayifenping'
                    : item.value === 8
                    ? 'iconfont icon-a-7Gjiufenping'
                    : 'iconfont icon-a-8Bshiliufenping'
                "
                style="margin-right: 10px"
              ></i>
            </span>

        //文字位置
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.label
            }}</span>
          </el-option>
        </el-select>

style代码

 // 分屏
    .select {
      position: absolute;
      right: 5%;
      top: -7.5%;
      border: 1px solid #fff;
      border-radius: 25px;
      height: 30px;
      ::v-deep .el-select > .el-input {
        line-height: 15px;
        display: block;
        width: 80px;
      }
      ::v-deep .el-input--medium .el-input__inner {
        height: 30px;
        margin-left: 8px;
      }
//去除后边符号图标
      ::v-deep .el-icon-arrow-up:before {
        content: "";
      }
    }

icon阿里巴巴图标颜色更改

.icon-a-7Gjiufenping:before {
  content: "\e675";
//颜色添加，需要不同颜色图标可多次添加图标至项目中，改变其中颜色
  color: #8dea3c;
}