怎么在el-select框里面加一个放大镜单位icon图标】
时间: 2024-05-07 08:20:56 浏览: 175
你可以在 `el-select` 的 `el-input` 中添加一个 `suffix` 插槽,然后在这个插槽中添加一个 `i` 标签来显示放大镜图标。例如:
```html
<el-select v-model="selectedValue" placeholder="请选择">
<el-input v-model="inputValue" suffix>
<i class="el-input__icon el-icon-search"></i>
</el-input>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
在上面的代码中,`suffix` 属性用于显示 `el-input` 右侧的插槽,而 `i` 标签则用于显示 `el-icon-search` 图标。你可以根据需要修改图标的样式和类名。
相关问题
把el-select中的下拉箭头图标换成放大镜图标
你可以通过以下两种方式将 `el-select` 中的下拉箭头图标换成放大镜图标:
1. 使用 `slot` 自定义 `el-select` 中的 `suffix-icon`,将默认的下拉箭头图标替换为放大镜图标。
```html
<el-select placeholder="请选择">
<template slot="suffix-icon">
<i class="el-icon-search"></i>
</template>
</el-select>
```
2. 使用 `el-select` 的 `suffix-icon` 属性指定自定义图标的类名,将默认的下拉箭头图标替换为放大镜图标。
```html
<el-select placeholder="请选择" suffix-icon="el-icon-search"></el-select>
```
需要注意的是,这里使用的放大镜图标是 `element-ui` 中内置的图标,需要先在项目中引入 `element-ui` 的样式文件。同时,你也可以使用其它图标库中的图标来替换默认的下拉箭头图标。
阅读全文