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

会飞的蚂蚁

于 2021-12-27 20:06:12 发布

阅读量1.2w

点赞数 19

文章标签： ui elementui vue.js

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

版权

在Element-UI中，虽然el-input提供了prefix-icon属性来添加图标，但el-select本身不直接支持此属性。要为el-select添加图标，可以使用模板插槽的方式来实现。例如，通过`<template #prefix>`或在Element-Plus中使用`<template slot=prefix>`，并在里面插入想要的图标元素。示例代码展示了如何在select前面添加一个suitcase图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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