<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>
