antd tree组件使用expandedKeys无法收起

您好！关于这个问题，可能是因为您在使用 `expandedKeys` 属性时，没有正确设置收起对应节点的键值。您可以尝试在点击节点时，通过调用 `onExpand` 方法来更新 `expandedKeys` 属性，以实现正确的节点展开和收起操作。具体操作方式可以参考 Ant Design 官方文档中的说明。如果仍然无法解决问题，可以提供更多的代码细节或错误提示信息，以便更好地帮助您解决问题。

相关问题

vue3中antd tree组件使用expandedKeys进行展开后所有节点不能操作展开或收起

您好！针对您的问题，可能是由于您在使用`expandedKeys`属性时没有正确处理每个节点的`expanded`状态。具体来说，您需要在每个节点上添加一个`expanded`属性，并在`onSelect`事件中更新该属性的值，同时根据该属性的值来确定节点的展开状态。具体实现可以参考以下代码：

<template>
  <a-tree :treeData="treeData" :expandedKeys="expandedKeys" @select="onSelect"></a-tree>
</template>

<script>
import { ref } from 'vue';
import { Tree } from 'ant-design-vue';

export default {
  components: {
    'a-tree': Tree
  },
  setup() {
    const treeData = ref([
      {
        title: 'Node1',
        key: '1',
        expanded: false,
        children: [
          {
            title: 'Child Node1',
            key: '1-1',
            expanded: false,
            isLeaf: true
          },
          {
            title: 'Child Node2',
            key: '1-2',
            expanded: false,
            isLeaf: true
          }
        ]
      },
      {
        title: 'Node2',
        key: '2',
        expanded: false,
        children: [
          {
            title: 'Child Node3',
            key: '2-1',
            expanded: false,
            isLeaf: true
          },
          {
            title: 'Child Node4',
            key: '2-2',
            expanded: false,
            isLeaf: true
          }
        ]
      }
    ]);
    const expandedKeys = ref([]);

    const onSelect = (selectedKeys, info) => {
      const { node } = info;
      if (!node.isLeaf) {
        node.expanded = !node.expanded;
        expandedKeys.value = treeData.value
          .filter((n) => n.expanded)
          .map((n) => n.key);
      }
    };

    return {
      treeData,
      expandedKeys,
      onSelect
    };
  }
};
</script>

在上面的代码中，我们为每个节点添加了一个`expanded`属性，并在`onSelect`事件中更新了该属性的值。同时，我们通过`treeData`数组中的节点来确定当前展开的节点，然后将它们的`key`添加到`expandedKeys`数组中，以便于antd tree组件正确显示每个节点的展开状态。

antd Tree组件点击节点文字实现展开收起

可以通过在Tree组件中设置onSelect函数来实现点击节点文字展开收起。

具体实现步骤如下：

1. 在Tree组件中设置onSelect函数，该函数会在节点被选中时触发。

<Tree
  onSelect={onSelect}
  // 其他属性
>
  // 树节点
</Tree>

2. 在onSelect函数中判断被选中的节点是否有子节点，如果有则展开节点，否则不做任何操作。

const onSelect = (selectedKeys, { node }) => {
  const { children } = node.props;
  if (children) {
    setExpandedKeys(expandedKeys => {
      const index = expandedKeys.indexOf(selectedKeys[0]);
      if (index > -1) {
        // 如果节点已展开，则收起节点
        return [...expandedKeys.slice(0, index), ...expandedKeys.slice(index + 1)];
      } else {
        // 如果节点未展开，则展开节点
        return [...expandedKeys, selectedKeys[0]];
      }
    });
  }
}

3. 在Tree组件中设置expandedKeys属性，该属性为展开的节点的key的数组。

<Tree
  onSelect={onSelect}
  expandedKeys={expandedKeys}
  // 其他属性
>
  // 树节点
</Tree>

完整代码如下：

import React, { useState } from 'react';
import { Tree } from 'antd';

const Demo = () => {
  const [expandedKeys, setExpandedKeys] = useState([]);

  const onSelect = (selectedKeys, { node }) => {
    const { children } = node.props;
    if (children) {
      setExpandedKeys(expandedKeys => {
        const index = expandedKeys.indexOf(selectedKeys[0]);
        if (index > -1) {
          // 如果节点已展开，则收起节点
          return [...expandedKeys.slice(0, index), ...expandedKeys.slice(index + 1)];
        } else {
          // 如果节点未展开，则展开节点
          return [...expandedKeys, selectedKeys[0]];
        }
      });
    }
  }

  return (
    <Tree
      onSelect={onSelect}
      expandedKeys={expandedKeys}
    >
      // 树节点
    </Tree>
  );
}

export default Demo;