Select 选择器显示内容为icon图标选项（Ant Design of Vue）

系统管理员 2022-11-13 07:28 732阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]

<template>
      <div>
        <a-select size="large" placeholder="请选择图标" style="width: 200px" @change="handleChange">
          <a-select-option
            v-for="i in seleiconlist"
            :key="i.key"
          ><a-icon :type="i.value" style="font-size: 18px;"/></a-select-option>
        </a-select>
      </div>
    </template>
    <script>
    export default { 
      data() { 
        return { 
          seleiconlist:[
            { key:"account-book",value:"account-book"},
            { key:"appstore",value:"appstore"},
            { key:"bank",value:"bank"},
            { key:"book",value:"book"},
            { key:"clock-circle",value:"clock-circle"},
            { key:"snippets",value:"snippets"}
          ]
        };
      },
      mounted() { },
      methods: { 
        handleChange(value) { 
          console.log(`Selected: ${ value}`);
        },
      }
    };
    </script>
    <style scoped>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70]: /images/20221022/cd55e243f2d14887931da0059569560c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，732人围观）

还没有评论，来说两句吧...

相关阅读

相关 ant design vue fontAwesome 图标选择器

基于fontAwesome进行封装 -------------------- 效果展示 -------------------- ...

电玩女神/ 2024年04月19日 13:25/ 0 赞/ 102 阅读

相关 Ant Design Vue 年选择器

> 七分本事，三分关系文章目录参考文档效果展示实现过程 -------------------- 参考文档 `提示：这里可以添加本文

清疚/ 2024年02月17日 13:27/ 0 赞/ 44 阅读

相关 spring boot 与 Ant Design of Vue 创建前端工程以及引入ant design of vue（一）

spring boot 与 Ant Design of Vue 创建前端工程以及引入ant design of vue（一）公众号前后端系列视频文章汇总帖

梦里梦外;/ 2023年07月12日 14:30/ 0 赞/ 19 阅读

相关 Vue-Ant Design Pro of Vue

[https://blog.csdn.net/gu\_wen\_jie/article/details/90444161][https_blog.csdn.net_gu_wen

爱被打了一巴掌/ 2023年06月27日 05:39/ 0 赞/ 43 阅读

相关 vue3.0使用ant design of vue

在vue3.0项目中，想使用ant的话，尝试使用一下[Antdv2.x][]，[Antdv2.x][]是唐金州老师（杭州校宝在线）研发的新一代适配 Vue 3.0 的组件库，

短命女/ 2023年01月12日 11:37/ 0 赞/ 313 阅读

相关 Ant-Design-Pro of Vue （一）

安装 vue-cli yarn 安装 vue-cli 有些坑，在这记录下来官方安装方法 `yarn global add @vue/cli` 在之前先卸载旧

╰半橙微兮°/ 2023年01月03日 09:20/ 0 赞/ 215 阅读

相关 ant-design-vue select 使用汇总

最近使用ant-design-vue，在使用[select][]的时候遇到一些特殊情况，特此做一下整理汇总。首先实例中的下拉选中为： const options

谁践踏了优雅/ 2022年11月30日 04:28/ 0 赞/ 287 阅读

相关 Select 选择器显示内容为icon图标选项（Ant Design of Vue）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

系统管理员/ 2022年11月13日 07:28/ 0 赞/ 733 阅读

相关 Ant Design Vue下拉选择框增加可搜索功能（Ant Design Vue Select选择器）

Ant Design Vue下拉选择框增加可搜索功能打开Ant Design Vue官网，找到[Select选择器（点击进入）][Select]，见如下示例：![在这里插入

末蓝、/ 2022年10月28日 01:29/ 0 赞/ 731 阅读

相关 Vue-Ant Design Pro of Vue

Ant Design Pro of Vue 本来呢是想写一些关于[Ant Design Vue][]的文章，不过恰好用到了一个开源的基于Ant Design Vue 开发

雨点打透心脏的1/2处/ 2022年01月29日 15:55/ 0 赞/ 297 阅读