<docs>
---
order: 0
title:
zh-CN: 基本用法
en-US: Basic usage
## zh-CN
最简单的用法,展示可勾选,可选中,禁用,默认展开等功能。
## en-US
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
</docs>
<template>
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:tree-data="treeData"
>
<template #title="{ title, key }">
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
<template v-else>{{ title }}</template>
</template>
</a-tree>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { TreeProps } from 'ant-design-vue';
const treeData: TreeProps['treeData'] = [
{
title: 'parent 1',
key: '0-0',
children: [
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
{ title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
{ title: 'leaf', key: '0-0-0-1' },
],
},
title: 'parent 1-1',
key: '0-0-1',
children: [{ key: '0-0-1-0', title: 'sss' }],
];
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
watch(expandedKeys, () => {
console.log('expandedKeys', expandedKeys);
});
watch(selectedKeys, () => {
console.log('selectedKeys', selectedKeys);
watch(checkedKeys, () => {
console.log('checkedKeys', checkedKeys);
</script>