iView Select教程，请移步传送门click
1.iView官网实例
<template>
<Row>
<Col span="12" style="padding-right:10px">
<Select
v-model="model13"
filterable
remote
:remote-method="remoteMethod1"
:loading="loading1">
<Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option>
</Select>
</Col>
</Row>
</template>
<script>
export default {
data () {
return {
model13: '',
loading1: false,
options1: [],
model14: [],
loading2: false,
options2: [],
list: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New hampshire', 'New jersey', 'New mexico', 'New york', 'North carolina', 'North dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode island', 'South carolina', 'South dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West virginia', 'Wisconsin', 'Wyoming']
}
},
methods: {
remoteMethod1 (query) {
if (query !== '') {
this.loading1 = true;
setTimeout(() => {
this.loading1 = false;
const list = this.list.map(item => {
return {
value: item,
label: item
};
});
this.options1 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
}, 200);
} else {
this.options1 = [];
}
}
}
</script>
Notes
Notice: If not template/render mode, you need to usei-select, i-option.
Select events
| Event Name | Description | Return Value |
|---|---|---|
| on-change | Emitted when selected Optionchange.It will return value. See the label-in-value property if need return label |
The current selected item. |
| on-query-change | Emitted when query word is changed. | query |
| on-clear | Emitted when click clear button. | - |
| on-open-change | Emitted when dropdown show or hide. | true / false |
vue 的原生select，使用的是change事件去触发，select change事件，而在iView中，使用的是on-change事件
如下
<div class="select">
<i-select style="width:100px" v-model="type" @on-change="changeValue(type,'测试')">
<i-option :value="'申请'">申请</i-option>
<i-option :value="'申请'">授权</i-option>
</i-select>
</div>
<script>
changeValue(type, option) {
console.log('type is: %s, option is: %s',type,option)
}
</script>
在没看iview api之前，使用v-on:change 事件触发select无效，所以还得使用iView的on-change事件才能触发
