👑 [需求] ProFormTreeSelect如何用valueEnum生成树状数据

[wooxyz]

🥰 需求描述

文档中说ProFormTreeSelect：支持 request 和 valueEnum 两种方式来生成子项。我用valueEnum生成树形数据，写了半天也没给成功。

[chenshuai2144]

在Ant Design Pro中，你可以使用valueEnum属性来生成树状数据，以便使用ProFormTreeSelect组件。

valueEnum是一个对象，其中键是树状选择框中的值，而值是对象，该对象表示显示在选择框中的标签。

下面是一个简单的示例：

const treeData = [
  {
    title: 'Node 1',
    value: '1',
    children: [
      {
        title: 'Child Node 1',
        value: '1-1',
      },
      {
        title: 'Child Node 2',
        value: '1-2',
      },
    ],
  },
  {
    title: 'Node 2',
    value: '2',
    children: [
      {
        title: 'Child Node 3',
        value: '2-1',
      },
      {
        title: 'Child Node 4',
        value: '2-2',
      },
    ],
  },
];

const valueEnum = {};

function flatData(data) {
  data.forEach((item) => {
    valueEnum[item.value] = item.title;
    if (item.children) {
      flatData(item.children);
    }
  });
}

flatData(treeData);

<ProForm.Item
  name="tree"
  label="树选择框"
  valueEnum={valueEnum}
  component={ProFormTreeSelect}
  treeData={treeData}
  placeholder="请选择"
  style={{ width: '100%' }}
  allowClear
  treeDefaultExpandAll
/>

在上面的代码中，我们使用flatData函数将树状数据扁平化，并将每个节点的value与title映射到valueEnum对象中。最后，我们将valueEnum作为valueEnum属性传递给ProFormTreeSelect组件，并将treeData作为treeData属性传递。

这样，您就可以使用树状数据生成ProFormTreeSelect组件了。

[jevonsflash]

为什么用了valueEnum还需要使用treeData？