ant design vue树形控件

Question

ant design vue中的tree树形控件，如何实现只展开不折叠的功能，求解答

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
在 Ant Design Vue 的 Tree 树形控件中，可以通过配置 default-expand-all 属性为 true 来实现默认展开所有节点的功能，但是无法实现只展开不折叠的功能。

要实现只展开不折叠的功能，需要自定义 Tree 组件，并在其中实现相应的逻辑。以下是一个实现该功能的示例代码：

<template>
  <a-tree
    :tree-data="treeData"
    :expanded-keys="expandedKeys"
    :default-expand-all="false"
    @expand="handleExpand"
  ></a-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          title: 'Node 1',
          key: '1',
          children: [
            {
              title: 'Node 1-1',
              key: '1-1',
              children: [
                {
                  title: 'Node 1-1-1',
                  key: '1-1-1',
                },
              ],
            },
            {
              title: 'Node 1-2',
              key: '1-2',
            },
          ],
        },
        {
          title: 'Node 2',
          key: '2',
          children: [
            {
              title: 'Node 2-1',
              key: '2-1',
            },
            {
              title: 'Node 2-2',
              key: '2-2',
            },
          ],
        },
      ],
      expandedKeys: [],
    };
  },
  methods: {
    handleExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
    },
  },
};
</script>

在这个示例代码中，我们在 Tree 组件中配置了 default-expand-all 属性为 false，并监听 expand 事件来更新展开的节点列表。在 handleExpand 方法中，我们将展开的节点列表保存到 expandedKeys 数据中，然后将其传递给 expanded-keys 属性。这样，在用户展开节点后，节点就会一直保持展开状态，不会自动折叠。