update Select

梁灏
1 parent 1a97aa89
Showing 2 changed files with 62 additions and 40 deletions Show diff stats
examples/routers/select.vue
src/components/select/select.vue
 <template>
-    <div>
-        <Select v-model="model1" style="width:200px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+    <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>
-
-        <Select v-model="model2" multiple style="width:200px">
-            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Col>
+        <Col span="12">
+        <Select
+                v-model="model14"
+                multiple
+                filterable
+                remote
+                :remote-method="remoteMethod2"
+                :loading="loading2">
+            <Option v-for="(option, index) in options2" :value="option.value" :key="index">{{option.label}}</Option>
         </Select>
-
-        <Button type="primary" @click="changeData">changeData</Button>
-    </div>
+        </Col>
+    </Row>
 </template>
 <script>
     export default {
         data () {
             return {
-                cityList: [
-                    {
-                        value: 'New York',
-                        label: 'New York'
-                    },
-                    {
-                        value: 'London',
-                        label: 'London'
-                    },
-                    {
-                        value: 'Sydney',
-                        label: 'Sydney'
-                    },
-                    {
-                        value: 'Ottawa',
-                        label: 'Ottawa'
-                    },
-                    {
-                        value: 'Paris',
-                        label: 'Paris'
-                    },
-                    {
-                        value: 'Canberra',
-                        label: 'Canberra'
-                    }
-                ],
-                model1: '',
-                model2: []
+                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: {
-            changeData() {
-                this.model2.push('Canberra')
+            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 = [];
+                }
+            },
+            remoteMethod2 (query) {
+                if (query !== '') {
+                    this.loading2 = true;
+                    setTimeout(() => {
+                        this.loading2 = false;
+                        const list = this.list.map(item => {
+                            return {
+                                value: item,
+                                label: item
+                            };
+                        });
+                        this.options2 = list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
+                    }, 200);
+                } else {
+                    this.options2 = [];
+                }
             }
         }
     }
@@ -761,7 +761,7 @@
             },
             slotOptions(options, old){
                 // #4626，当 Options 的 label 更新时，v-model 的值未更新
-                if (options && options.length && this.values.length) {
+                if (options && options.length && this.values.length && !this.multiple) {
                     this.values = this.values.map(value => {
                         const option = options.find(option => {
                             if (!option.componentOptions) return false;