el-tree获取节点

<div id="app" v-cloak>
    <el-tree
        :data="rootData"
        ref="rootTree"
        show-checkbox
        node-key="value"
        default-expand-all>
    </el-tree>
    <button @click="getKeys">获取选中节点Key</button>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello',
            rootData: [
                {"value":16,"label":"首页","parent":-1},
                {"value":17,"label":"用户列表","parent":-1},
                {"value":18,"label":"信息列表","parent":18},
                {"value":19,"label":"信息管理","parent":-1,
                    "children":[
                        {"value":20,"label":"个人信息","parent":19},
                        {"value":21,"label":"修改信息","parent":19}
                        ]
                },
                {"value":22,"label":"资金数据","parent":-1,
                    "children":[
                        {"value":23,"label":"投资分布","parent":22},
                        {"value":24,"label":"项目分布","parent":22},
                        {"value":25,"label":"收支统计","parent":22}
                    ]
                },
                {"value":26,"label":"系统管理","parent":26,
                    "children":[
                        {"value":27,"label":"机构管理","parent":26},
                        {"value":28,"label":"角色管理","parent":26},
                        {"value":29,"label":"岗位管理","parent":26},
                        {"value":30,"label":"用户管理","parent":26},
                        {"value":31,"label":"系统菜单","parent":26}
                    ]
                },
                {"value":32,"label":"车辆管理","parent":-1,
                    "children":[
                        {"value":33,"label":"车辆信息","parent":32}
                    ]
                }
            ]
        },
        methods: {
            getKeys () {
                var aKey = this.getCheckedKeys(this.rootData, this.$refs.rootTree.getCheckedKeys(), 'value');
                console.log(aKey);
            },
            getCheckedKeys (data, keys, key) {
                var res = [];
                recursion(data, false);
                return res;
                function recursion (arr, isChild) {
                    var aCheck = [];
                    for ( var i = 0; i < arr.length; i++ ) {
                        var obj = arr[i];
                        aCheck[i] = false;

                        if ( obj.children ) {
                            aCheck[i] = recursion(obj.children, true) ? true : aCheck[i];
                            if ( aCheck[i] ) {
                                res.push(obj[key]);
                            }
                        }

                        for ( var j = 0; j < keys.length; j++ ) {
                            if ( obj[key] == keys[j] ) {
                                aCheck[i] = true;
                                if ( res.indexOf(obj[key]) == -1 ) {
                                    res.push(obj[key]);
                                }
                                break;
                            }
                        }
                    }
                    if ( isChild ) {
                        return aCheck.indexOf(true) != -1;
                    }
                }
            }
        }
    })
</script>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值