Merge pull request #81 from Leopoldthecoder/next

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

@@ -4,7 +4,7 @@
     @click.stop="selectOptionClick"
     class="el-select-dropdown__item"
     v-show="queryPassed"
-    :class="{ 'selected': itemSelected(), 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
+    :class="{ 'selected': itemSelected, 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
     <slot>
       <span>{{ label }}</span>
     </slot>
@@ -13,7 +13,6 @@
 
 <script type="text/babel">
   import emitter from 'main/mixins/emitter';
-  const toString = Object.prototype.toString;
 
   export default {
     mixins: [emitter],
@@ -39,7 +38,6 @@
 
     data() {
       return {
-        parent: null,
         index: -1,
         queryPassed: true,
         hitState: false
@@ -47,8 +45,24 @@
     },
 
     computed: {
+      parent() {
+        let result = this.$parent;
+        while (!result.isSelect) {
+          result = result.$parent;
+        }
+        return result;
+      },
+
+      itemSelected() {
+        if (Object.prototype.toString.call(this.parent.selected) === '[object Object]') {
+          return this === this.parent.selected;
+        } else if (Array.isArray(this.parent.selected)) {
+          return this.parent.value.indexOf(this.value) > -1;
+        }
+      },
+
       currentSelected() {
-        return this.selected || (this.$parent.multiple ? this.$parent.value.indexOf(this.value) > -1 : this.$parent.value === this.value);
+        return this.selected || (this.parent.multiple ? this.parent.value.indexOf(this.value) > -1 : this.parent.value === this.value);
       }
     },
 
@@ -77,27 +91,21 @@
         }
       },
 
-      itemSelected() {
-        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;
-        }
-      },
-
       queryChange(query) {
         this.queryPassed = new RegExp(query, 'i').test(this.label);
         if (!this.queryPassed) {
           this.parent.filteredOptionsCount--;
         }
+      },
+
+      resetIndex() {
+        this.$nextTick(() => {
+          this.index = this.parent.options.indexOf(this);
+        });
       }
     },
 
     created() {
-      this.parent = this.$parent;
-      while (!this.parent.isSelect) {
-        this.parent = this.parent.$parent;
-      }
       this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
       this.parent.options.push(this);
       this.parent.optionsCount++;
@@ -110,6 +118,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>