<script> import Select, { Option } from '../index'; import { fetch } from './tbFetchSuggest'; import '../assets/index.less'; export default { data() { return { disabled: false, data: [], value: undefined, }; }, methods: { onChange(value) { console.log('select ', value); // value.label = value.key this.value = value; }, fetchData(value) { if (value) { fetch(value, data => { this.data = data; }); } else { this.data = []; } }, toggleDisabled() { this.disabled = !this.disabled; }, }, render() { const data = this.data; const options = data.map(d => { return ( <Option key={d.value}> <i>{d.text}</i> </Option> ); }); return ( <div> <h2>force suggest</h2> <p> <button onClick={this.toggleDisabled}>toggle disabled</button> </p> <div> <Select labelInValue onSearch={this.fetchData} disabled={this.disabled} value={this.value} optionLabelProp="children" placeholder="placeholder" defaultActiveFirstOption style={{ width: '500px' }} onChange={this.onChange} filterOption={false} > {options} </Select> </div> </div> ); }, }; </script>