修改折叠/展开图标

<Treeshow-iconshow-linedefault-expand-all:load-data="onLoadData":tree-data="treeData"@select="selectTree"style="height: 100%; overflow-y: scroll"
>
<!-- 通过expanded判断当前是展开/折叠状态 --><template #switcherIcon="{ expanded }"><template v-if="!expanded"> <!-- 因为我设置了默认展开所有节点，所以反着判断 --><PlusSquareOutlined />  <!-- 放折叠图标 --></template><template v-else><MinusSquareOutlined /> <!-- 放展开图标 --></template></template></Tree>

显示图标-------自定义图标

<template #icon="{ key, selected }"><template v-if="key === '0'"><img src="/src/assets/images/all.png" />  <!-- 这里可以放置图片/svg/icon --></template><template v-else><AppstoreAddOutlined style="color: #5aa9ff; font-size: 18px; margin-right: 3px" /></template>
</template>

标题上显示子节点数量

Html部分：

<template #title="{ dataRef }" style="display: flex"><span>{{ dataRef.title + '(' + dataRef.num + ')' }}</span>
</template>

ts部分：

const treeData = ref<TreeDataItem[]>([{title: '全部',key: '0',class: 0,id: '',num: 0,},
]);onMounted(() => {   //这里不想用钩子的话可以用:load-data="onLoadData"，因为我这全部下面就一层数据没必要用异步加载getRootTabData().then((res) => {treeData.value[0].num = res.response.length;    //放置全部节点下的子节点数量treeData.value[0].children = [];       //给全部添加子节点console.log(res);if (res.status == 'OK') {res.response.forEach((i) => {let params = {key: i.classId,title: i.className,label: i.className,value: i.classId,num: i.labelNum,      //用于显示子节点数量};treeData.value[0].children.push(params);});console.log(treeData.value);}});});

关于antd Tree组件修改图标相关推荐

antd tree组件自定义图标
把树的小三角替换为自定义图标,如下图效果 //小三角收起的背景图设置 ant-tree-switcher_close { width: 16px !important; height: 15px !i ...
利用antd tree组件实现类文件夹树(文件夹图标跟随树展开状态)
需求是用ant-design的组件做出如设计图所示类文件夹树,尝试修改多次样式及功能,最终使用tree组件完成功能,在次共享一下代码,如果有问题或者建议可以评论等探讨, 先上结构题代码,样式随附,主要 ...
antd Tree组件中，自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component {state = {rightClickNodeTreeIt ...
div获取第一个子节点jquery_【antd】Tree组件子节点不完全勾选获取父节点的值
注意⚠️:这篇文章适用于后台返回的树结构比较多的情况下,如果数据比较少的情况下,可以参考我的上一篇文章,操作起来比较简单我们在实际操作tree组件和后台交互的时候一般都是需要将父节点传过去,如图:点 ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...
修改Element-ui中tree组件最底层节点的样式
最近在项目中,设计将tree组件里最底层的节点布局设计成了多列,那要怎么实现呢? 首先用自定义节点的方式渲染节点,在渲染方法里给最底层节点添加class renderContent(h, { node ...
Vue编写的树形tree组件
近期在进行vue的学习,自研的vue项目需要一个tree组件.由于在学习阶段,不想'拿来主义',拿别人写好的组件使用,对于处于学习阶段的开发者来说不是一件好事,虽然拿别人开发好的东西过来用可以快速进行 ...
elementui tree组件层级过多时可左右滚动
2019独角兽企业重金招聘Python工程师标准>>> 使用vue+elementui的tree组件,elementui官网elementui的tree组件问题描述:tree层级过 ...
Dojo高级Web2.0 UI组件库---Tree组件
Tree组件可以把有层次关系的数据用树状结构展现出来,就如同 Windows 系统的资源浏览器.Tree有两个模板,一个是Tree模板,一个是TreeNode模板,应该说Tree模板就是一个容器,里面 ...

关于antd Tree组件修改图标

vue+antd修改Tree组件图标

修改折叠/展开图标

显示图标-------自定义图标

标题上显示子节点数量

关于antd Tree组件修改图标相关推荐

最新文章

热门文章