@alicd/crui-tree-select-field/docs/1-data.md

树形下拉框

---
order: 1
title: 使用数据直接生成
---

````jsx
import TreeSelectField from '@alicd/crui-tree-select-field';

const treeData = [{
    label: '服装',
    value: '1',
    selectable: false,
    children: [{
        label: '男装',
        value: '2',
        children: [{
            label: '外套',
            value: '4'
        }, {
            label: '夹克',
            value: '5',
            disabled: true
        }]
    }, {
        label: '女装',
        value: '3',
        children: [{
            label: '裙子',
            value: '6'
        }]
    }]
}];

ReactDOM.render(<TreeSelectField treeDefaultExpandAll={true} dataSource={treeData} style={{ width: 200 }} />, mountNode);

````

```` template
<TreeSelectField treeDefaultExpandAll={true} dataSource={this.state.treeData} style={{ width: 200 }} />
````
```` javascript
walle.view.extend({
  state: {
    treeData: [{
        label: '服装',
        value: '1',
        selectable: false,
        children: [{
            label: '男装',
            value: '2',
            children: [{
                label: '外套',
                value: '4'
            }, {
                label: '夹克',
                value: '5',
                disabled: true
            }]
        }, {
            label: '女装',
            value: '3',
            children: [{
                label: '裙子',
                value: '6'
            }]
        }]
    }]
  }
})
````