Select: add prefix named slot (#11063)

* Select: add prefix named slot

* Update select.md

examples/docs/en-US/select.md

@@ -697,6 +697,12 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | blur | triggers when Input blurs | (event: Event) |
 | focus | triggers when Input focuses | (event: Event) |
 
+### Select Slots
+| Name    | Description |
+|---------|-------------|
+|    —    | Option component list |
+| prefix  | content as Select prefix |
+
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

examples/docs/es/select.md

@@ -703,6 +703,12 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | blur           | se dispara cuando el input pierde el foco | (event: Event)                           |
 | focus          | se dispara cuando el input obtiene el foco | (event: Event)                           |
 
+### Select Slots
+| Name    | Description |
+|---------|-------------|
+|    —    | Option component list |
+| prefix  | content as Select prefix |
+
 ### Atributos del grupo de opciones
 | Atributo | Descripción                              | Tipo    | Valores aceptados | Por defecto |
 | -------- | ---------------------------------------- | ------- | ----------------- | ----------- |

examples/docs/zh-CN/select.md

@@ -692,6 +692,12 @@
 | blur | 当 input 失去焦点时触发 | (event: Event) |
 | focus | 当 input 获得焦点时触发 | (event: Event) |
 
+### Select Slots
+|   name  | 说明     |
+|---------|---------|
+|    —    | Option 组件列表 |
+| prefix  | Select 组件头部内容 |
+
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |

packages/select/src/select.vue

@@ -92,6 +92,9 @@
       @paste.native="debouncedOnInputChange"
       @mouseenter.native="inputHovering = true"
       @mouseleave.native="inputHovering = false">
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
       <i slot="suffix"
        :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
        @click="handleIconClick"

test/unit/specs/select.spec.js

@@ -331,6 +331,32 @@ describe('Select', () => {
     }, 100);
   });
 
+  it('prefixed icon', () => {
+    vm = createTest({
+      template: `
+        <div>
+          <el-select v-model="value">
+            <el-option
+              v-for="item in options"
+              :label="item.label"
+              :key="item.value"
+              :value="item.value">
+            </el-option>
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          options: [],
+          value: ''
+        };
+      }
+    });
+    expect(vm.$el.querySelector('.el-input__icon').classList.contains('el-icon-search')).to.be.true;
+  });
+
   it('custom el-option template', () => {
     vm = createVue({
       template: `