ant-design-vue 自带icon 批量渲染方式

最新推荐文章于 2025-03-24 09:37:00 发布
原创 最新推荐文章于 2025-03-24 09:37:00 发布 · 2.5k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
vue

当前文章被收录于：

vue
1 篇文章 0 人学习
订阅专栏 查看详情
antd

当前文章被收录于：

antd
1 篇文章 0 人学习
订阅专栏 查看详情
本文介绍了如何在Ant Design Vue项目中批量渲染图标，特别是在一个表格页面中，根据返回的数据动态显示不同的图标。两种方法分别是在main.js中全局注册和非全局注册。非全局注册包括三个步骤：导入所有图标库，使用slot定制渲染，以及在模板中根据数据字段显示图标。

ant-design-vue 自带icon 批量渲染方式

ant-design-vue 自带icon 批量渲染方式

在一个table页面，数据返回了ant-design-vue 自带的icon，需要根据返回的数据去显示很多个未知的图标

方式一:

在main.js中全局渲染组件，这种方式可以参考下面这篇文章
https://segmentfault.com/a/1190000038704028
我们这里主要讲非全局渲染的方式

方式二:

三步：
①import * as antIcons from ‘@ant-design/icons-vue’;
②slots: { customRender: ‘icon’ }
③<template #icon="{ record }">


其中record.antdvIcon 就是返回的图标字段，比如PlusOutlined或者plus-outlined
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

每日一练29：antd-design框架搭建表格功能-增删功能
Super Livia
04-19 830
首先说下功能是表格数据展示，点击增加会出来一个表单弹框，删除用户直接调接口删除就行 1：首先写个新增用户按钮 import {PlusOutlined} from '@ant-design/icon' <Button icon={<PlusOutlined/>} type="primary" onClick={()=>{showModal()}>新增用户<Button> 2：写个表单modal import React,{useState} from
JeecgBoot企业级开发中实现自定义导出EXCEL的前端表格字段功能
sakura的博客
05-30 3969
本文介绍了，在JeecgBoot企业级开发中，针对前端表格中的数据需要导出成Excel，但是表格中的字段和数据库表对不上从而导出失败，因此自定义实现一个导出Excel的接口，包含前端和后端SpringBoot项目的实现，解决了Mybatis-plus字段映射不到数据库的问题。
Ant-design 源码分析之数据展示（十二）Tabs
qq_37588125的博客
12-26 3145
Ant-design 源码分析之数据展示（十二）Tabs 2021SC@SDUSC 一、组件结构 1、ant代码结构
antd上传单张图片 组件封装
zhangyubababa的博客
05-11 964
封装antd上传图片的组件： import { Upload, message } from 'antd'; import React, { useState } from 'react'; import styles from '@/components/UploadImage/index.less'; import { requestUrl, getUploadFileType } from '@/utils/utils'; import { LoadingOutlined, PlusOutlined
vue3 ant-vue form表单里的upload组件封装
马娟的博客
08-18 1764
<template> <a-upload v-model:file-list="fileList" name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :action="action" :before-upload="beforeUpload" @change="handleChange" v.
ant-design-vue的icon图标动态渲染
Motong_Lee的博客
04-18 2088
/ 把app传入其中。// 动态加载ant-icons。icon的name直接去。
ant-design-vue2.x动态渲染icon图标
weixin_45803990的博客
04-29 3297
input输入框样式的修改 带搜索的输入框 <a-input-search placeholder="搜索信息" @search="onSearch" class="search"/> 修改背景色： 项目用的是less、如果是在当前页面内直接写是不生效的！！！，这个样式要外部引入才会生效。 比如我的就是在main.js中引入了全局的less样式，就把这个less写在全局less中就行了。 // 带搜索的输入框 .ant-input-affix-wrapper .ant-.
ant-design-vue 2.x 中Icon 组件动态渲染
时光足迹
06-30 1619
ant-design-vue 2.x 中Icon 组件动态渲染 antdv2.*中如何使用动态Icon import type { App } from "vue"; import * as antIcons from "@ant-design/icons-vue"; export function setupAntdIcon(app: App<Element>): void { // 注册组件 Object.keys(antIcons).forEach((key) => {
Ant Design Vue3.x中动态渲染icon图标
平行时空的猫
05-04 9083
前言 随着vue3成为默认版本，越来越多的开发者选择vue3进行项目的开发，UI组件库也对Vue3进行了适配，Ant Design Vue3.x升级后，icon图标的使用方式有了如下的改变： 要使用icon需要先引入后在以组件的形式使用： import { AppstoreOutlined, MessageOutlined, CalendarOutlined} from '@ant-design/icons-vue'; <AppstoreOutlined /> <MessageOutli
Vue3 Ant Design不再支持＜a-icon＞，怎么动态渲染图标
qq_43751614的博客
07-21 1421
在旧版本中，字体图标库都是根据type来区分显示，但是新版本中ant的子图图标全部都变成标签显示了，于是在循环图标的时候，依据往常的 已经不能实现了如果还需要和老版本保持一致书写习惯，可采用以下方法。
Vue3 antdv 如何动态渲染 icons-vue 图标（a-icon 不支持了）
卡尔特斯
07-28 8792
效果，只是图标都需要自行提供，如果想要直接使用官方新版本自带的所有。这种也是可以达到以前版本的。，只能另外的方式处理了。动态使用，代替之前的。
Vue3+ant design 中根据字符串动态渲染Menu组件的icon图标
qq_34261285的博客
01-10 2686
在ant design4+版本中 icon是组件的形式引用 在Menu才当中需要使用h函数渲染，但是一般带有权限的往往是从后台获取的，而后台返回的icon字段大多是字符串，在而h函数无法直接渲染字符串形式的icon组件，解决这一问题。最重要的一部，在渲染图标的时候使用对象属性的形式访问即可。这里简略了部分代码，要记住引入图标后是使用字面量存储后再通过对象属性名的方式访问即可。路由的基本配置,假设从服务器得到的数据大致也是这个形式的。其中最主要的是iconName字段，需要根据字符串渲染组件。
vue2.x使用ant design vue记录
????鱼干～
11-11 2294
vue2.x使用ant design vue记录(清除指定prop校验、使用阿里iconfont的svg图标、监听iframe内部事件、重置data()、h5禁止浏览器下拉刷新以及左右滑动、判断图片是否无效链接、文件链接转文件流下载解决谷歌默认预览文件的问题、防抖函数)
vue3+ant design vue 动态加载Icon图标
forever__fish的博客
02-26 2957
在使用前端组件库时，我们常常会遇到需要动态加载 Icon 图标，如何处理这一需求，是前端开发人员必须思考的问题。在 vue 中，有一个内置组件 component，它的主要作用是配合 is 动态渲染组件，这一作用就满足了我们上述的需求。
第一次使用Ant Design X Vue遇到的问题
最新发布
miao92518的博客
03-24 1119
近期公司需要搭建一个自己的AI对话页面，想到曾经在文章里看到过Ant Design X Vue这个组件库，就试着搭了一个项目，但搭建过程确实远不如预期顺利，今天把踩到的坑分享一下，希望遇到类似问题的做个参考。
Vue 3 Ant Design Vue 动态渲染icons
DevilAngelia的博客
05-25 1960
//main.ts import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' import Antd from 'ant-design-vue' import * as antIcons from '@ant-design/icons-vue' // 引入ant icons import 'ant-design-
ant design在Vue中的两种引用详解
不加防腐剂的博客
01-05 3199
1.完整引入 //完整引入 import Vue from 'vue'; import Antd from 'ant-design-vue'; import App from './button'; import 'ant-design-vue/dist/antd.css'; /*阻止启动生产消息 开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。 而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检 查还有一些小的运行时开销，这在生产环境模式下是可以避免的。*/ Vue
antdv 2.* 中如何使用动态Icon
时光足迹
06-30 2159
ant-design-vue 2.x 中Icon 组件动态渲染 antdv2.*中如何使用动态Icon ant design icons批量注册使用 （1）新建antdvIcons.ts import type { App } from "vue"; import { createVNode } from "vue"; import * as Icons from "@ant-design/icons-vue"; const Icon = (props: { icon: string }) =>
Ant Design中如何遍历渲染图标
ae_pppppp的博客
02-16 721
ant中如何使用图标
Ant Design Vue——Ant Design Vue customRender 中使用图标
qq_43201350的博客
02-07 247
Ant Design Vue——Ant Design Vue customRender 中使用图标
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值