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

60 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 {
2019-09-28 12:45:07 +00:00
data() {
2018-02-12 04:13:37 +00:00
return {
data: [],
value: [],
2019-01-12 03:33:27 +00:00
};
2018-02-12 04:13:37 +00:00
},
methods: {
2019-09-28 12:45:07 +00:00
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
},
2019-09-28 12:45:07 +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
},
},
2019-09-28 12:45:07 +00:00
render() {
2019-01-12 03:33:27 +00:00
const data = this.data;
2019-09-28 12:45:07 +00:00
const options = data.map(d => {
return (
<Option key={d.value}>
<i>{d.text}</i>
</Option>
);
2019-01-12 03:33:27 +00:00
});
2019-09-28 12:45:07 +00:00
return (
2018-02-12 04:13:37 +00:00
<div>
2019-09-28 12:45:07 +00:00
<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>
2018-02-12 04:13:37 +00:00
</div>
2019-09-28 12:45:07 +00:00
);
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>