<template>
|
<a-modal width="45%" title="菜单配置" destroyOnClose :visible="treeF" @ok="handleTreeOk" @cancel="handleTreeCancel" >
|
<a-tree
|
v-model="selectMenu"
|
checkable
|
:auto-expand-parent="autoExpandParent"
|
:tree-data="treeMenuData"
|
@check="onCheck"
|
@select="onSelect"
|
/>
|
</a-modal>
|
</template>
|
|
<script lang="tsx">
|
import {Component, Vue, Prop} from "vue-property-decorator";
|
|
@Component({
|
components:{
|
}
|
})
|
export default class TreeControl extends Vue{
|
|
private autoExpandParent: boolean = true
|
|
private checkKey: any[] = []
|
@Prop( {
|
type: Boolean,
|
})
|
private visibleTree!: boolean
|
get treeF() {
|
return this.visibleTree
|
}
|
|
@Prop({
|
type: Array,
|
default:()=>{}
|
})
|
private treeMenuData!: any[]
|
|
@Prop({
|
type: Array,
|
default:()=>{}
|
})
|
private selectMenu!: any[]
|
|
private onSelect(selectedKeys: any[], info:any) {
|
// this.selectedKeys = selectedKeys;
|
}
|
|
// private expandedKeys
|
private onCheck(expandedKeys: any) {
|
// if not set autoExpandParent to false, if children expanded, parent can not collapse.
|
// or, you can remove all expanded children keys.
|
this.checkKey = expandedKeys;
|
// this.autoExpandParent = false;
|
}
|
|
private handleTreeCancel() {
|
|
this.visibleTree = false
|
this.$emit('trunTreeFlag',this.visibleTree)
|
}
|
|
private handleTreeOk() {
|
this.visibleTree = false
|
this.$emit('trunTreeFlag',this.visibleTree)
|
this.checkKey = []
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
