fix select bugs

examples/docs/select.md

@@ -2,6 +2,7 @@
   export default {
     data() {
       return {
+        list: null,
         options: [{
           value: '选项1',
           label: '黄金糕'
@@ -127,6 +128,10 @@
         states: ["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"]
       };
     },
+    
+    mounted() {
+      this.list = this.states.map(item => { return { value: item, label: item }; });
+    },
 
     methods: {
       remoteMethod(query) {
@@ -134,8 +139,10 @@
           this.loading = true;
           setTimeout(() => {
             this.loading = false;
-            this.options5 = this.states.filter(item => item.toLowerCase().indexOf(query.toLowerCase()) > -1).map(item => { return { value: item, label: item }; });
+            this.options5 = this.list.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
           }, 200);
+        } else {
+          this.options5 = [];
         }
       }
     }
@@ -716,8 +723,8 @@
 
 ## 服务端搜索
 
-<el-select v-model="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading">
-  <el-option v-for="item in options5" :label="item.label" :value="item.value"></el-option>
+<el-select v-model="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading" placeholder="请输入关键词">
+  <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value"></el-option>
 </el-select>
 
 ```html
@@ -727,10 +734,12 @@
     multiple
     filterable
     remote
+    placeholder="请输入关键词"
     :remote-method="remoteMethod"
     :loading="loading">
     <el-option
       v-for="item in options5"
+      :key="item.value"
       :label="item.label"
       :value="item.value">
     </el-option>

packages/select/src/option.vue

@@ -81,7 +81,7 @@
         if (toString.call(this.parent.selected) === '[object Object]') {
           return this === this.parent.selected;
         } else if (toString.call(this.parent.selected) === '[object Array]') {
-          return this.parent.selected.indexOf(this) > -1;
+          return this.parent.value.indexOf(this.value) > -1;
         }
       },
 
@@ -90,6 +90,12 @@
         if (!this.queryPassed) {
           this.parent.filteredOptionsCount--;
         }
+      },
+
+      resetIndex() {
+        this.$nextTick(() => {
+          this.index = this.parent.options.indexOf(this);
+        });
       }
     },
 
@@ -110,6 +116,11 @@
 
       this.$on('queryChange', this.queryChange);
       this.$on('disableOptions', this.disableOptions);
+      this.$on('resetIndex', this.resetIndex);
+    },
+
+    beforeDestroy() {
+      this.dispatch('select', 'onOptionDestroy', this);
     }
   };
 </script>

packages/select/src/select.vue

@@ -53,7 +53,7 @@
         ref="popper"
         v-show="visible && nodataText !== false"
         :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
-        <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
+        <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0 && !loading">
           <slot></slot>
         </ul>
         <p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
@@ -185,12 +185,6 @@
     },
 
     watch: {
-      loading(val) {
-        if (val) {
-          this.options = [];
-        }
-      },
-
       placeholder(val) {
         this.currentPlaceholder = val;
       },
@@ -272,9 +266,6 @@
             this.selected = {};
           }
           this.remoteMethod(val);
-          if (val === '') {
-            this.options = [];
-          }
         } else if (typeof this.filterMethod === 'function') {
           this.filterMethod(val);
         } else {
@@ -301,9 +292,6 @@
             if (this.selected && this.selected.value) {
               this.selectedLabel = this.selected.label;
             }
-            if (this.remote) {
-
-            }
           }
         } else {
           if (this.remote) {
@@ -512,6 +500,16 @@
         if (this.filterable) {
           this.query = this.selectedLabel;
         }
+      },
+
+      onOptionDestroy(option) {
+        this.optionsCount--;
+        this.filteredOptionsCount--;
+        let index = this.options.indexOf(option);
+        if (index > -1) {
+          this.options.splice(index, 1);
+        }
+        this.broadcast('option', 'resetIndex');
       }
     },
 
@@ -528,6 +526,7 @@
 
       this.$on('addOptionToValue', this.addOptionToValue);
       this.$on('handleOptionClick', this.handleOptionSelect);
+      this.$on('onOptionDestroy', this.onOptionDestroy);
     }
   };
 </script>