98 lines
1.9 KiB
Markdown
98 lines
1.9 KiB
Markdown
<cn>
|
|
#### ๅๆงๆไฝ็คบไพ
|
|
ๅๆงๆไฝ็คบไพ
|
|
</cn>
|
|
|
|
<us>
|
|
#### basic controlled example
|
|
basic controlled example
|
|
</us>
|
|
|
|
```html
|
|
<template>
|
|
<a-tree
|
|
checkable
|
|
@expand="onExpand"
|
|
:expandedKeys="expandedKeys"
|
|
:autoExpandParent="autoExpandParent"
|
|
v-model="checkedKeys"
|
|
@select="onSelect"
|
|
:selectedKeys="selectedKeys"
|
|
:treeNodes="treeData"
|
|
/>
|
|
</template>
|
|
<script>
|
|
const treeData = [{
|
|
title: '0-0',
|
|
key: '0-0',
|
|
children: [{
|
|
title: '0-0-0',
|
|
key: '0-0-0',
|
|
children: [
|
|
{ title: '0-0-0-0', key: '0-0-0-0' },
|
|
{ title: '0-0-0-1', key: '0-0-0-1' },
|
|
{ title: '0-0-0-2', key: '0-0-0-2' },
|
|
],
|
|
}, {
|
|
title: '0-0-1',
|
|
key: '0-0-1',
|
|
children: [
|
|
{ title: '0-0-1-0', key: '0-0-1-0' },
|
|
{ title: '0-0-1-1', key: '0-0-1-1' },
|
|
{ title: '0-0-1-2', key: '0-0-1-2' },
|
|
],
|
|
}, {
|
|
title: '0-0-2',
|
|
key: '0-0-2',
|
|
}],
|
|
}, {
|
|
title: '0-1',
|
|
key: '0-1',
|
|
children: [
|
|
{ title: '0-1-0-0', key: '0-1-0-0' },
|
|
{ title: '0-1-0-1', key: '0-1-0-1' },
|
|
{ title: '0-1-0-2', key: '0-1-0-2' },
|
|
],
|
|
}, {
|
|
title: '0-2',
|
|
key: '0-2',
|
|
}]
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
expandedKeys: ['0-0-0', '0-0-1'],
|
|
autoExpandParent: true,
|
|
checkedKeys: ['0-0-0'],
|
|
selectedKeys: [],
|
|
treeData,
|
|
}
|
|
},
|
|
watch: {
|
|
checkedKeys(val) {
|
|
console.log('onCheck', val)
|
|
}
|
|
},
|
|
methods: {
|
|
onExpand (expandedKeys) {
|
|
console.log('onExpand', arguments)
|
|
// 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', checkedKeys)
|
|
this.checkedKeys = checkedKeys
|
|
},
|
|
onSelect (selectedKeys, info) {
|
|
console.log('onSelect', info)
|
|
this.selectedKeys = selectedKeys
|
|
},
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
```
|