博客

element-plus自定义el-select后缀图标

  • Post author:
  • Post category:其他




在element-plus中使用el-select自定义后缀图标


结果示例如下：


在这里插入图片描述

在这里插入图片描述

根据

element-plus

官网中给出的提示，

el-select

中有个

suffix-icon

的属性，可以自定义后缀图标，并且传入的类型有strng和Component。

在这里插入图片描述



1.那么先准备一个子组件，用于需要传入的图标：

组件：

IconDropDown.vue
 

<template>
  <img src="@/assets/images/base/button-search.png" alt="" />
</template>



2.在需要使用的组件中进行引入并使用


html
 

    <el-select v-model="queryParams.exceptionType" placeholder="选择工作状态" :suffix-icon="IconDropDown">
        <el-option label="正常" value="0"></el-option>
        <el-option label="异常" value="1"></el-option>
      </el-select>


script
 

<script setup>
import IconDropDown from '@/components/IconDropDown.vue';
</script>

我这边使用的是vue3的setup语法糖，所以引入就可以了，不需要显式注册，这样就完成自定义图标了，是不是很简单呢！


版权声明：本文为qq_43651168原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。