antd tree组件自定义图标

原创 已于 2022-10-20 15:36:52 修改 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #anti-design-vue

于 2022-10-20 15:32:53 首次发布
这篇博客介绍了如何使用CSS替换Ant Design Tree组件中开关节点的小三角图标，通过设置不同状态下的背景图片实现定制效果。同时，还隐藏了默认的小三角图标，增加了视觉一致性。

把树的小三角替换为自定义图标，如下图效果

//小三角收起的背景图设置

ant-tree-switcher_close {

  width: 16px !important;

  height: 15px !important;

  background: url('图片路径') no-repeat !important;

  background-size: 100% 100% !important;

}

//小三角展开的背景图设置

.ant-tree-switcher_open {

  width: 16px !important;

  height: 15px !important;

  background: url('图片路径') no-repeat !important;

  background-size: 100% 100% !important;

}

//小三角隐藏透明度设置

.anticon.anticon-caret-down.ant-tree-switcher-icon {

  opacity: 0 !important;

}

tree.ge
关注
antd vue 树控件自动自定义展开收起图标（非数据渲染）
Mr-yang的随笔
11-09 1881
<a-tree show-icon :icon="getIcon" :tree-data="treeData" > </a-tree> getIcon (props) { const { expanded } = props if (!props.children) { return <a-icon class="file" type="file-text" /> } return <a-icon type={expanded
vue-ant-树-自定义图标
baidu_36583119的博客
12-04 3298
<template> <!--树--> <a-tree showLine @select="onSelected"> <a-tree-node v-for="(item,key,index) in treeData" :key="key+''" :disabled="true"> ...
在antd tree组件基础上封装一个文件目录树
jacoby_fire的博客
11-23 3206
背景 最近公司所做的项目中有个文档管理的需求，需要有个目录来展示不同的文档。可以对文档目录进行添加、重命名、删除、切换等操作。但是antd的tree组件不能完全满足需要，于是就进行了二次封装。 先看看效果图： 难点 主要的难点是这个hover按钮，之前没什么思路。后来想一想，可以放在数据中的title里面，antd中的数据都可以将一段jsx放进去。如下： const TreeTitle = (props) => { const { title, id } = props;
antd中给TreeSelect组件添加自定义前缀图标
weixin_69903461的博客
11-29 1315
思路：遍历要展示的数据，给一级和子级通过遍历，添加icon。要点：不要忘记➕key。
antD——tree组件自定义父子图标及展开/折叠图标
who_become_gods的博客
04-29 2414
<!-- 展开/折叠图标 --> <a-icon slot="switcherIcon" type="down"/> <!-- 父子节点图标 --> <a-icon slot="parent" type="plus"/> <a-icon slot="child" type="minus"/> </a-tree> &lt...
可自定义树节点的Tree组件
03-20
`可自定义树节点的Tree组件`是一个专为满足这种需求而设计的功能强大的工具。它允许开发者根据具体项目的需求来定制树形结构的节点展示，提升用户体验并优化数据管理。在本文中，我们将深入探讨这个组件的工作原理、...
react+antd Tree树控件（Demo可以直接运行）实现（递归生成数据）同时支持左边图标自定义也可以加自己的Logo
this_zq的博客
05-07 2327
1 先上完成效果图 2 上代码（粘贴复制可以直接运行） import React, { useState } from 'react' import { Tree } from 'antd'; import { SmileOutlined, WalletOutlined, TabletOutlined } from '@ant-design/icons'; function IsTree(props) { //这是我从数据库得到的树的json数据 let d =
基于antd实现动态修改节点的Tree组件
study_way的博客
10-17 2646
之前遇到一个需求，可对于任意节点添加或删除子节点。首先技术栈是基于react+ant design，ant提供了Tree组件，但都是根据固定的数据渲染出树结构，如果需要新增或删除节点，官网并未提供。
React+Antd通过Tree组件实现可编辑可拖拽节点树
南城趣味的博客
02-18 6500
import React, { useState, useEffect } from 'react'; import { Tree } from 'antd'; import { PlusOutlined, EditOutlined, MinusOutlined, CheckOutlined, DeleteOutlined, } from '@ant-design/icons'; import styles from './index.less'; const { TreeNode }.
antd-vue 树改变前面图标 （完全实现自定义图标）
dashinihao的博客
11-15 4990
问题 我们在用antd-vue树的数据时想要自定义改变数据展开关闭的图标，除了默认的样式，我们在用一些api改变时效果总是不近人意，现在用css可以完全实现自定义图标的改变，根据需求来引用有的可能并不适配 仅作参考 上代码 // 树形引用 <a-tree :treeData="treeData" :showIcon="false" :showLine="true" > 样式改变 <style> // 关闭时的图标 ::v-de
Ant-tree 自定义父子节点图标
Serendipity_Cc的博客
08-23 941
Ant-tree 自定义父子节点图标(
关于antd Tree组件修改图标
m0_46301172的博客
07-28 3563
antd框架Tree组件自定义图标
在TREE组件中自定义iconFunction
weixin_34189116的博客
04-26 116
示例： 代码： &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;!-- http://blog.flexexamples.com/2007/11/15/creating-a-custom-icon-function-on-a-flex-tree-control/ --&gt; &lt;mx:Application xmlns:mx=...
关于在vue项目中给a-tree自定义图标
wo1361265245的博客
03-22 4770
a-tree的自定义图标
React给antd中TreeSelect组件左侧加自定义图标icon
见贤思齐焉，见不贤内自省
11-03 5399
很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用。 今天碰到了一个很恶心的问题，就是在给antd的treeSelect组件加左侧icon的时候，总是报一个警告， Warning: Each child in a list should have a unique “key” prop. 告诉我们每一个节点都需要有一个唯一的key。 首先我这里简单的封装了一下treeSelect这个组件： import React from 'react'; import { TreeSelect } from
antd动态tree 自定义样式
专栏
02-17 2858
import React, { useEffect, useState } from 'react';import { Tree } from 'antd';import './index.less';const { TreeNode } = Tree;import { getSubAreaData } from "@services/area";import { HeaderWithBack...
ant design vue tree控件自定义图标并动态变化
牧xin的博客
11-12 1万+
效果 展开文件夹时 代码 <a-tree :treeData="treeData" :default-selected-keys="defaultValue" show-icon :style="{ 'min-height': '500px', height: '700px', 'border-right': '2px solid
与 ant-design-vue tree 组件自定义图标的相爱相杀
weixin_40567679的博客
07-30 3837
与 ant-design-vue tree 组件自定义图标的相爱相杀 文章目录与 ant-design-vue tree 组件自定义图标的相爱相杀小结 最近遇到了在 tree 组件中需要用到自定义 icon 图标的需求 <!-- 首先，请求回来的数据是多层结构且不知道嵌套几层，所以自己多层 v-for 自然不现实 --> <!-- 官方也考虑到这个问题，只要通过 tree-data 属性直接给出数据即可，如下 --> <a-tree draggable s
Ant Design Vue TreeSelect组件自定义图标icon
热门推荐
qq_45059975的博客
09-08 1万+
业务需求 基于Ant Design Vue1.7.8版本。需要在TreeSelect 树型选择控件中根据不同的数据类型前面加不同的ICON图标。 效果 代码 <div class="list-box"> <div> <a-tree-select v-model="treeValue" style="width: 200px"
antd1.7.8tree自定义treenode
09-02
antd 1.7.8 版本中，tree 组件可以通过自定义 TreeNode 来实现个性化的节点显示。 首先，我们需要导入 Tree 组件和 TreeNode 组件： ``` import { Tree } from 'antd'; const TreeNode = Tree.TreeNode; ``` 然后...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值