antd tree组件自定义图标

已于 2022-10-20 15:36:52 修改
阅读量1k 收藏 1
点赞数
文章标签： css anti-design-vue
于 2022-10-20 15:32:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tree_ge/article/details/127428292
版权

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

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

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;

}

28岁没去过星巴克
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可自定义树节点的Tree组件
03-20
NULL 博文链接：https://as3.iteye.com/blog/865559
antD——tree组件自定义父子图标及展开/折叠图标
who_become_gods的博客
04-29 1981
<!-- 展开/折叠图标 --> <a-icon slot="switcherIcon" type="down"/> <!-- 父子节点图标 --> <a-icon slot="parent" type="plus"/> <a-icon slot="child" type="minus"/> </a-tree> &lt...
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"
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
antd-vue 树改变前面图标 （完全实现自定义图标）
dashinihao的博客
11-15 4170
问题 我们在用antd-vue树的数据时想要自定义改变数据展开关闭的图标，除了默认的样式，我们在用一些api改变时效果总是不近人意，现在用css可以完全实现自定义图标的改变，根据需求来引用有的可能并不适配 仅作参考 上代码 // 树形引用 <a-tree :treeData="treeData" :showIcon="false" :showLine="true" > 样式改变 <style> // 关闭时的图标 ::v-de
关于antd Tree组件修改图标
m0_46301172的博客
07-28 2622
antd框架Tree组件自定义图标
react+antd Tree树控件（Demo可以直接运行）实现（递归生成数据）同时支持左边图标自定义也可以加自己的Logo
this_zq的博客
05-07 2008
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 =
React给antd中TreeSelect组件左侧加自定义图标icon
见贤思齐焉，见不贤内自省
11-03 4357
很多时候官网并没有给我们过多地详解来解释他们的产品怎么使用。 今天碰到了一个很恶心的问题，就是在给antd的treeSelect组件加左侧icon的时候，总是报一个警告， Warning: Each child in a list should have a unique “key” prop. 告诉我们每一个节点都需要有一个唯一的key。 首先我这里简单的封装了一下treeSelect这个组件： import React from 'react'; import { TreeSelect } from
【React】- Antd tree树形组件前、后缀图标
Li-的博客
06-11 4650
文章目录一、antd官网二、代码1.实现效果2.读入数据 一、antd官网 antd官网树形控件API 二、代码 1.实现效果 2.读入数据 代码如下（示例）： import { Tree, Switch } from 'antd';//引入 //需要的图标 const baseIcon = <SVGIcon iconClass={'baseIcon'} width={14} height={14}></SVGIcon>; const departIcon = <SVGI
ant design vue tree添加自定义新增、修改、删除节点图标
weixin_43123984的博客
06-06 7138
a-tree自定义新增、修改、删除图标
antd通过 filterDropdown 自定义按某天时间搜索功能
10-16
主要介绍了antd通过 filterDropdown 自定义按某天时间搜索功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
antd Tree组件 搜索标红 例子
09-09
antd 的Tree组件带搜索，搜索内容标红
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
自定义组件 1、自定义组件被getFieldsValue包裹，会获得以下属性 onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样...
自定义TreeView，在树节点旁添加按钮。
04-13
基于C# winform,写的一个自定义TreeView和TreeNode,可以在每个自定义节点旁添加按钮。
antd组件Upload实现自己上传的实现示例
10-17
主要介绍了antd组件Upload实现自己上传的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
antd vue 树控件自动自定义展开收起图标（非数据渲染）
Mr-yang的随笔
11-09 1690
<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
antd树组件tree当中想要动态的修改展开和收起的Icon图标
zhangyizuishuai的博客
10-16 3690
方案1 使用CSS修改方案一 /* 任意图标的改法树组件 使用这个样式的前提是要把showLine={false}showLine设置为false*/ /* .ant-tree-switcher_close{//这个是收起的背景图设置 width: 24px; height: 24px; background: url('./图标1.png') no-repeat; background-size: 100% 100%; } .ant-tree-switcher_open
与 ant-design-vue tree 组件自定义图标的相爱相杀
weixin_40567679的博客
07-30 3350
与 ant-design-vue tree 组件自定义图标的相爱相杀 文章目录与 ant-design-vue tree 组件自定义图标的相爱相杀小结 最近遇到了在 tree 组件中需要用到自定义 icon 图标的需求 <!-- 首先，请求回来的数据是多层结构且不知道嵌套几层，所以自己多层 v-for 自然不现实 --> <!-- 官方也考虑到这个问题，只要通过 tree-data 属性直接给出数据即可，如下 --> <a-tree draggable s
ant design tree 不同类型节点使用不同图标和标题颜色
杨威的博客
06-25 3542
在使用ant design tree构建一个树结构时，需要根据节点的不同类型使用不同的图标和标题颜色
antd抽屉组件自定义右上角
最新发布
06-27
要自定义 Ant Design 的抽屉组件右上角，可以使用 `title` 属性来设置标题，并且将其包裹在一个自定义的容器中。然后，在该容器内添加一个自定义的按钮来实现你想要的样式和功能。 以下是一个示例代码，演示如何使用自定义的容器和按钮来替换默认的右上角关闭按钮： ```jsx import { Drawer } from 'antd'; const CustomDrawer = () => { const onClose = () => { // 关闭抽屉 }; return ( <Drawer title={ <div> <span>自定义标题</span> <Button type="text" onClick={onClose} style={{ float: 'right' }}> 自定义按钮 </Button> </div> } onClose={onClose} visible={true} > {/* 抽屉的内容 */} </Drawer> ); }; export default CustomDrawer; ``` 在这个示例中，我们使用了一个 `div` 元素来包裹标题和按钮，并使用 `float` 样式将按钮放置在标题的右侧。然后，我们将该 `div` 元素作为 `title` 属性的值传递给 `Drawer` 组件。最后，我们使用 `onClose` 属性来设置自定义按钮的点击事件，以便关闭抽屉。 你可以根据需要修改按钮的样式和功能，以达到你想要的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值