在Element UI的el-input组件前面添加图标

首先，你需要准备一个图标元素，可以是任何你想要的图标。为了简化，我们可以使用Font Awesome的图标。确保你已经在项目中正确地引入了Font Awesome CSS。然后，你可以创建一个新的div元素，将图标和el-input放在其中。通过使用CSS的伪元素::before，你可以在el-input前面插入一个图标。以下是示例代码：
HTML部分：

<div class="input-icon">
<i class="fas fa-search"></i>
<el-input v-model="inputValue" placeholder="请输入内容"></el-input>
</div>

CSS部分：

.input-icon {
position: relative;
width: 300px;
}
.input-icon::before {
content: '';
position: absolute;
top: 50%;
left: 10px;
width: 30px;
height: 30px;
background: url("your-icon-url") no-repeat center center;
background-size: contain;
}
.input-icon el-input {
padding-left: 45px;
}

在上述代码中，我们创建了一个新的div元素，其中包含一个Font Awesome的搜索图标和一个el-input元素。我们使用CSS的::before伪元素在图标和输入框之间创建了一些空间。然后，我们将el-input的左填充设置为45px，以使其与图标对齐。
请注意，你需要将”your-icon-url”替换为你的实际图标URL。另外，你可能需要根据你的具体需求调整宽度、高度、位置等参数。
最后，你可以通过Vue.js的v-model指令将输入框的值绑定到一个数据属性上。这样，当用户在输入框中输入文本时，你的数据属性将自动更新。以下是如何做到这一点的示例：

export default {
data() {
return {
inputValue: '', // 绑定到输入框的值
};
},
};

以上就是在Element UI的el-input组件前面添加图标的方法。虽然这种方法需要一些额外的CSS和可能的JavaScript代码，但它可以让你的输入框看起来更美观和专业。