在element-ui中input可以使用prefix-icon=“el-icon-user” 在前面添加icon图标,但是select自己没有该属性。那么如何在element-ui控件el-select前面前面icon图标

代码如下(示例):

<el-select clearable style="width: 560px" v-model="userModel.industryClassifyGid" placeholder="所属行业">
              <template #prefix>
                <span style="padding-left: 5px;">
                  <i class="el-icon-suitcase"></i>
                </span>
              </template>
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>

这里使用了 <template #prefix> 来替换,因为我使用的是element-plus ,如果使用的是element-ui 则直接使用slot替换

<el-select clearable style="width: 560px" v-model="userModel.industryClassifyGid" placeholder="所属行业">
              <template slot="prefix">
                <span style="padding-left: 5px;">
                  <i class="el-icon-suitcase"></i>
                </span>
              </template>
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐