一、环境

ant-design-vue: 4.0.0

vue: 3.2.45

typescript: 4.9.3

二、代码

HTML

<a-tree v-model:expanded-keys="expandedKeys" :tree-data="treeData" @select="onSelect"></a-tree>

TS

/** 展开的节点 */
const expandedKeys = ref<Key[]>([]);
/** 目录树数据 */
const treeData = ref<TreeProps['treeData']>([
  {
    title: '第一层',
    key: '0-0',
    children: [
      {
        title: '第二层1',
        key: '0-0-0',
        children: [
          { title: '第三层1', key: '0-0-0-0' },
          { title: '第三层2', key: '0-0-0-1'},
        ],
      },
      {
        title: '第二层2',
        key: '0-0-1',
        children: [{ title: '第三层3', key: '0-0-1-1' }],
      },
    ],
  },
]);

/**
 * 目录树选择
 * @param selectedKeys
 * @param {node, selected}
 */
function onSelect(selectedKeys: Key[], { node, selected }: any) {
  if (node?.children) {
    if (!expandedKeys.value.includes(node.key)) {
      expandedKeys.value.push(node.key);
    } else {
      expandedKeys.value.splice(expandedKeys.value.indexOf(node.key), 1);
    }
    expandedKeys.value = [...new Set(expandedKeys.value)];
  }

}

三、总结

没什么好总结的。