antD——tree组件自定义父子图标及展开/折叠图标
组件 自定义 Tree 图标 展开 折叠 父子 Antd
2023-09-27 14:29:10 时间
antD官网
https://www.antdv.com/components/tree-cn/
效果
代码
<template> <div> <a-tree showIcon v-if="treeData.length" :treeData="treeData" :replaceFields="replaceFields" checkStrictly> <!-- 展开/折叠图标 --> <a-icon slot="switcherIcon" type="down"/> <!-- 父子节点图标 --> <a-icon slot="parent" type="plus"/> <a-icon slot="child" type="minus"/> </a-tree> </div> </template> <script> export default { data() { return { treeData: [{ "id": 1000, "orgName": "中国", "orgType": "02", "orderNum": 1, "childList": [{ "id": 10001, "orgName": "北京", "orgType": "02", "orderNum": 1, "parentOrgId": 1000, "childList": [{ "id": 100001, "orgName": "朝阳区", "orgType": "02", "orderNum": 1, "parentOrgId": 10001 }, { "id": 100002, "orgName": "丰台区", "orgType": "02", "orderNum": 2, "parentOrgId": 10001 }] }, { "id": 102, "orgName": "上海", "orgType": "02", "orderNum": 2, "parentOrgId": 1000 }] }], replaceFields: { // 根据后端返回的数据调整 children: 'childList', title: 'orgName', key: 'id' }, } }, mounted() { let that = this that.setIcon(that.treeData) }, methods: { /** 设置图标 */ setIcon(menus) { let that = this for (let value of menus) { if (value.childList && value.childList.length > 0) { // 关键 - 判断是否还有子节点 that.setIcon(value.childList) value.slots = {icon: 'parent'} } else { value.slots = {icon: 'child'} } } that.treeData = menus }, } } </script>
相关文章
- JVM监控:JMX组件与底层原理
- 仿照wtform自定义Form组件
- antdvue2.x 使用阿里iconfont自定义组件iconfont
- web 前端常用组件【02】Select 下拉框
- Spring Boot 实现日志链路追踪,无需引入组件,让日志定位更方便!
- ASP.NET自定义控件组件开发 第三章 为控件添加事件 前篇
- ASP.NET自定义控件组件开发 第二章 继承WebControl的自定义控件
- ASP.NET自定义控件组件开发 第一章 第三篇 第一章的完结篇
- 三大组件与三大优势 SUSE发布CaaS平台为哪般?
- 微信小程序组件自定义和使用
- Kubernetes Helm及其功能性组件
- vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数
- JS组件系列——JsPlumb流程图及相关效果详解
- vue和react的组件渲染和更新的过程对比
- Telerik UI for ASP.NET MVC,响应迅速且可自定义组件
- 2015最流行的Android组件、工具、框架大全
- 地图组件上的自定义区域叠加层显示 ArcGis + GeoJson
- 集成 Spring Boot 常用组件的后台快速开发框架 spring-boot-plus 国
- 【Android 屏幕适配】屏幕适配通用解决方案 ④ ( 自定义组件解决方案 | 计算设计稿与实际布局的比例系数 )
- vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
- React 和 ReactNative 的渲染机制/ ReactNative 与原生之间的通信 / 如何自定义封装原生组件/RN中的多线程
- React-Native 中自定义checkbox组件
- React Native]React Native组件之Navigator
- 利用webpack和vue实现组件化
- 微信小程序自定义组件实现 tabBar、navBar