@alicd/crui-tree-select-field/docs/3-search.md

树形下拉框

---
order: 3
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} 
  autoWidth={false} 
  showSearch={true} 
  dataSource={treeData} 
style={{ width: 200 }} />, mountNode);
````

```` template
<TreeSelectField 
  treeDefaultExpandAll={true} 
  autoWidth={false} 
  showSearch={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'
            }]
        }]
    }]
  }
})
````