将el-select中右侧图标改成点击 el-icon-caret-top 不点击展示el-icon-caret-bottom
时间: 2023-12-11 09:02:54 浏览: 44
您可以使用以下的代码来实现将el-select中右侧图标改成点击 el-icon-caret-top 不点击展示el-icon-caret-bottom的效果:
```html
<el-select v-model="value" placeholder="请选择">
<template #suffix>
<i class="el-input__icon el-icon-caret-bottom"
@click="showOptions = !showOptions"
:class="{'el-icon-caret-top': showOptions}">
</i>
</template>
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
```
在这个代码中,我们使用了一个template标签来覆盖了el-select默认的右侧图标,并在这个template标签中添加了一个i标签来显示图标。
在这个i标签中,我们使用了@click事件来监听用户点击事件,当用户点击时,我们将showOptions变量的值取反,以此来控制展开或收起下拉选项的状态。
同时,我们还使用了:class指令来动态绑定i标签的class属性,当showOptions为真时,我们将i标签的class属性设置为'el-icon-caret-top',以此来显示向上的箭头图标;当showOptions为假时,我们将i标签的class属性设置为'el-icon-caret-bottom',以此来显示向下的箭头图标。