---
order: 0
title: 基本使用
---

````jsx
import TreeSelectField from '@alicd/crui-tree-select-field';
import { TreeSelect} from '@alicd/next';

ReactDOM.render(<TreeSelectField inputStyle={{width: 200}} autoWidth={false} treeDefaultExpandAll={true} hasClear={true} style={{ width: 200 }}>
  <TreeSelect.Node key="1" value="1" label="服装">
    <TreeSelect.Node key="2" value="2" label="男装">
      <TreeSelect.Node key="4" value="4" label="外套" />
      <TreeSelect.Node key="5" value="5" label="夹克" />
    </TreeSelect.Node>
    <TreeSelect.Node key="3" value="3" label="女装">
      <TreeSelect.Node key="6" value="6" label="裙子" />
    </TreeSelect.Node>
  </TreeSelect.Node>
</TreeSelectField>, mountNode);
````

```` template
<TreeSelectField inputStyle={{width: 200}} autoWidth={false} treeDefaultExpandAll={true} hasClear={true} style={{ width: 200 }}>
  <TreeSelect.Node key="1" value="1" label="服装">
    <TreeSelect.Node key="2" value="2" label="男装">
      <TreeSelect.Node key="4" value="4" label="外套" />
      <TreeSelect.Node key="5" value="5" label="夹克" />
    </TreeSelect.Node>
    <TreeSelect.Node key="3" value="3" label="女装">
      <TreeSelect.Node key="6" value="6" label="裙子" />
    </TreeSelect.Node>
  </TreeSelect.Node>
</TreeSelectField>
````