vue

修改el-select

2021-10-08  本文已影响0人  Morbid_D

修改的样子

<el-select v-model="value" class="selectInfo" placeholder="请选择" style="width:260px;" size="small" >

              <template slot="prefix">库存状态</template>

              <el-option

                v-for="item in options"

                :key="item.value"

                :label="item.label"

                :value="item.value">

              </el-option>

            </el-select>

在定义的css文件中添加

.el-select{

  .el-input{

    position: relative;

    height: 32px;

    .el-input__prefix{

      background: #F0EFFF;

      width: 80px !important;

      text-align: center;

      font-size: 14px;

      font-family: PingFang SC;

      font-weight: 400;

      color: #43425D;

      line-height: 32px;

      position: absolute;

      left: 0;

      height: 32px;

      border: 1px solid #DCDFE6;

      border-top-left-radius: 5px;

      border-bottom-left-radius: 5px;

    }

    .el-input__suffix{

      position: absolute;

      // top: 30px;

      right: 0;

    }

    .el-input__inner{

      width: 180px;

      position: absolute;

      right: 0;

    }

  }

}

上一篇 下一篇

猜你喜欢

热点阅读