由于 antd 组件并未提供点击文字展开节点的方法 需要自定义方法来操作展开或者关闭节点

文档中 expandedKeys 属性是用来控制哪些节点是展开的

<template>
	<a-tree
         v-model:selectedKeys="selectedKeys"
         :expanded-keys="expandedKeys"
         :tree-data="treeData"
         :fieldNames="fieldNames"
         @expand="handleExpand"
         @select="select"
	  />
</template>

<script setup lang="ts">
	import _ from 'lodash';
    import { onMounted, onUnmounted, ref } from 'vue';
	//自定义字段匹配接口返回的内容
	const fieldNames = {
	       children: 'childList',
	       title: 'name',
	       key: 'id',
    };
    //模拟数据
	const treeData = ref([
		{
		    name: 'parent 2',
		    id: '1-0',
		    childList: [
		      {
		        name: 'parent 2-0',
		      id  : '1-0-0',
		      },
		      {
		        name: 'parent 2-1',
		        id  : '2-0-1',
		      },
		    ],
		  },
	]);
    const expandedKeys = ref<string[]>([]);
    const selectedKeys = ref<string[]>();
    const handleExpand = (keys: string[], { expanded, node }) => {
        const tempKeys = ((node.parent ? node.parent.children : treeData.value) || []).map(({ key }) => key);
        if (expanded) {
            expandedKeys.value = _.difference(keys, tempKeys).concat(node.key);
        } else {
            expandedKeys.value = keys;
        }
    };
    //点击文字触发
    function select(selectedKeys, e) {
        console.log('select', selectedKeys);
        console.log('e', e);
        if (e.node.childList) {
            //判断当前项 是否在已经展开keys数组 如果不在则展开 否则关闭
            let index = expandedKeys.value.indexOf(e.node.id);
            if (index === -1) {
                expandedKeys.value.push(e.node.id);
            } else {
                expandedKeys.value = expandedKeys.value.filter((item) => item !== e.node.id);
            }
        }
    }
</script >