zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    linux基本命令
    Linux中常用的50个命令
    Selenium2之XPath定位
    Selenium2浏览器启动及配置
    python学习内容.05
    python学习内容.04
    python学习内容.03
    python学习内容.02
    python学习内容.01
    RESTful
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/14329457.html
Copyright © 2011-2022 走看看