element-ui控件el-select如何在前面添加icon图标

最新推荐文章于 2024-03-29 05:11:45 发布

会飞的蚂蚁

最新推荐文章于 2024-03-29 05:11:45 发布

阅读量1w

点赞数 18

文章标签： ui elementui vue.js

本文链接：https://blog.csdn.net/zyfmxc/article/details/122179310

版权

在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>