iView Select教程疾掰，請(qǐng)移步傳送門(mén)click
1.iView官網(wǎng)實(shí)例
<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事件去觸發(fā)，select change事件，而在iView中，使用的是on-change事件
如下
<div class="select">
<i-select style="width:100px" v-model="type" @on-change="changeValue(type,'測(cè)試')">
<i-option :value="'申請(qǐng)'">申請(qǐng)</i-option>
<i-option :value="'申請(qǐng)'">授權(quán)</i-option>
</i-select>
</div>
<script>
changeValue(type, option) {
console.log('type is: %s, option is: %s',type,option)
}
</script>
在沒(méi)看iview api之前，使用v-on:change 事件觸發(fā)select無(wú)效棘劣，所以還得使用iView的on-change事件才能觸發(fā)
