<template>
    
<a-card title="用户-角色-关联" style="margin-top: 40px;">

    <a-tree
    v-model="checkedKeys"
    checkable
    :expanded-keys="expandedKeys"
    :auto-expand-parent="autoExpandParent"
    :selected-keys="selectedKeys"
    :tree-data="treeData"
    @expand="onExpand"
    @select="onSelect"
  />
</a-card>

</template>

<script>
    const treeData = [
  
                ];
    for (let i=0; i<11; i++){
        treeData.push(
                 {
                    title: `${i}-role`,
                    key: `${i}`,
                 }
        )
    }
    export default{

        data () {
            return {
                
                expandedKeys: [],
                autoExpandParent: true,
                checkedKeys: [],
                selectedKeys: [],
                treeData,
            }
        },
        // 
        watch: {
            checkedKeys(val) {
            console.log('onCheck', val);
            },
        },

        methods: {
            onExpand(expandedKeys) {
                console.log('onExpand', expandedKeys);
                // if not set autoExpandParent to false, if children expanded, parent can not collapse.
                // or, you can remove all expanded children keys.
                this.expandedKeys = expandedKeys;
                this.autoExpandParent = false;
            },
            onCheck(checkedKeys) {
                console.log('onCheck', Array.from(checkedKeys));
                this.checkedKeys = checkedKeys;
            },
            onSelect(selectedKeys, info) {
                console.log('onSelect', info);
                this.selectedKeys = selectedKeys;
            }

        },
        created () {
            
            let id =this.$route.params.id
            console.log(id)
            this.checkedKeys = [id.toString()]
        }
    }


</script>