Select: refactor and bug fix

examples/docs/zh-CN/select.md

@@ -81,15 +81,15 @@
           value: 'Guangzhou',
           label: '广州'
         }],
-        value: '',
+        value: '选项2',
         value2: '',
         value3: '',
         value4: '',
         value5: [],
         value6: '',
-        value7: [],
+        value7: '',
         value8: '',
-        value9: [],
+        value9: '',
         loading: false,
         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"]
       };
@@ -97,9 +97,20 @@
     
     mounted() {
       this.list = this.states.map(item => { return { value: item, label: item }; });
+//      this.options4 = this.states.map(item => { return { value: item, label: item }; });
+//      this.value9 = ['Vermont'];
     },
 
     methods: {
+      empty() {
+        this.value9 = ['New York'];
+      },
+      aa(val) {
+        console.log('change', val)
+      },
+      bb() {
+        this.options.splice(0, 1, { label: 'haha', value: 'haha' });
+      },
       remoteMethod(query) {
         if (query !== '') {
           this.loading = true;
@@ -129,11 +140,11 @@
 ### 基础用法
 
 适用广泛的基础单选
-
+<el-button @click="bb">bb</el-button>
 :::demo `v-model`的值为当前被选中的`el-option`的 value 属性值
 ```html
 <template>
-  <el-select v-model="value" placeholder="请选择">
+  <el-select v-model="value" placeholder="请选择" @change="aa">
     <el-option
       v-for="item in options"
       :label="item.label"
@@ -499,13 +510,13 @@
 ### 远程搜索
 
 从服务器搜索数据，输入关键字进行查找
-
+<el-button @click="empty">aa</el-button>
 :::demo 为了启用远程搜索，需要将`filterable`和`remote`设置为`true`，同时传入一个`remote-method`。`remote-method`为一个`Function`，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果`el-option`是通过`v-for`指令渲染出来的，此时需要为`el-option`添加`key`属性，且其值需具有唯一性，比如此例中的`item.value`。
 ```html
 <template>
   <el-select
     v-model="value9"
-    multiple
+    clearable
     filterable
     remote
     placeholder="请输入关键词"

packages/pagination/src/pagination.js

@@ -140,10 +140,8 @@ export default {
         return (
           <span class="el-pagination__sizes">
             <el-select
-              size="small"
               value={ this.$parent.internalPageSize }
-              on-change={ this.handleChange }
-              width={ 110 }>
+              on-change={ this.handleChange }>
               {
                 this.pageSizes.map(item =>
                     <el-option

packages/select/src/option.vue

@@ -4,7 +4,11 @@
     @click.stop="selectOptionClick"
     class="el-select-dropdown__item"
     v-show="visible"
-    :class="{ 'selected': itemSelected, 'is-disabled': disabled || groupDisabled, 'hover': parent.hoverIndex === index }">
+    :class="{
+      'selected': itemSelected,
+      'is-disabled': disabled || groupDisabled,
+      'hover': parent.hoverIndex === index
+    }">
     <slot>
       <span>{{ currentLabel }}</span>
     </slot>
@@ -63,23 +67,11 @@
       },
 
       itemSelected() {
-        if (Object.prototype.toString.call(this.parent.selected) === '[object Object]') {
-          return this === this.parent.selected;
-        } else if (Array.isArray(this.parent.selected)) {
+        if (!this.parent.multiple) {
+          return this.value === this.parent.value;
+        } else {
           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);
-      }
-    },
-
-    watch: {
-      currentSelected(val) {
-        if (val === true) {
-          this.dispatch('ElSelect', 'addOptionToValue', this);
-        }
       }
     },
 
@@ -122,10 +114,6 @@
       this.parent.filteredOptionsCount++;
       this.index = this.parent.options.indexOf(this);
 
-      if (this.currentSelected === true) {
-        this.dispatch('ElSelect', 'addOptionToValue', [this, true]);
-      }
-
       this.$on('queryChange', this.queryChange);
       this.$on('handleGroupDisabled', this.handleGroupDisabled);
       this.$on('resetIndex', this.resetIndex);

packages/theme-default/src/pagination.css

@@ -23,6 +23,8 @@
       width: 110px;
       input {
         padding-right: 25px;
+        border-radius: var(--border-radius-small);
+        height: 28px;
       }
     }
 

packages/theme-default/src/select.css

@@ -12,13 +12,6 @@
     display: block;
     position: relative;
 
-    @when small {
-      & input {
-        border-radius: var(--border-radius-small);
-        height: 28px;
-      }
-    }
-
     &:hover {
       .el-input__inner {
         border-color: var(--select-border-color-hover);

test/unit/specs/select.spec.js

@@ -387,21 +387,23 @@ describe('Select', () => {
       remoteMethod
     });
     const select = vm.$children[0];
-    select.query = '面';
-    setTimeout(() => {
-      expect(select.filteredOptionsCount).to.equal(1);
-      select.query = '';
-      select.options[0].$el.click();
-      vm.$nextTick(() => {
-        expect(vm.value[0]).to.equal('选项4');
-        select.deletePrevTag({ target: select.$refs.input });
-        select.deletePrevTag({ target: select.$refs.input });
-        select.resetInputState({ keyCode: 1 });
+    vm.$nextTick(() => {
+      select.query = '面';
+      setTimeout(() => {
+        expect(select.filteredOptionsCount).to.equal(1);
+        select.query = '';
+        select.options[0].$el.click();
         vm.$nextTick(() => {
-          expect(vm.value.length).to.equal(0);
-          done();
+          expect(vm.value[0]).to.equal('选项4');
+          select.deletePrevTag({ target: select.$refs.input });
+          select.deletePrevTag({ target: select.$refs.input });
+          select.resetInputState({ keyCode: 1 });
+          vm.$nextTick(() => {
+            expect(vm.value.length).to.equal(0);
+            done();
+          });
         });
-      });
-    }, 250);
+      }, 250);
+    });
   });
 });