ant-design-vue/components/vc-select/demo/mul-suggest.vue

54 lines
1.1 KiB
Vue
Raw Normal View History

2018-02-12 04:13:37 +00:00
<script>
2019-01-12 03:33:27 +00:00
import Select, { Option } from '../index';
import '../assets/index.less';
import { fetch } from './tbFetchSuggest';
2018-02-12 04:13:37 +00:00
export default {
data () {
return {
data: [],
value: [],
2019-01-12 03:33:27 +00:00
};
2018-02-12 04:13:37 +00:00
},
methods: {
onChange (value) {
2019-01-12 03:33:27 +00:00
console.log('onChange ', value);
this.value = value;
2018-02-12 04:13:37 +00:00
},
fetchData (value) {
fetch(value, (data) => {
2019-01-12 03:33:27 +00:00
this.data = data;
});
2018-02-12 04:13:37 +00:00
},
},
render () {
2019-01-12 03:33:27 +00:00
const data = this.data;
2018-02-12 04:13:37 +00:00
const options = data.map((d) => {
2019-01-12 03:33:27 +00:00
return <Option key={d.value}><i>{d.text}</i></Option>;
});
2018-02-12 04:13:37 +00:00
return (<div>
<h2>multiple suggest</h2>
<div>
<Select
value={this.value}
labelInValue
style={{ width: '500px' }}
animation='slide-up'
placeholder='搜索下'
optionLabelProp='children'
multiple
notFoundContent=''
onSearch={this.fetchData}
onChange={this.onChange}
filterOption={false}
>
{options}
</Select>
</div>
2019-01-12 03:33:27 +00:00
</div>);
2018-02-12 04:13:37 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-02-12 04:13:37 +00:00
</script>