antD——tree组件自定义父子图标及展开/折叠图标

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>