Select: add slot `empty` (#13785)

* Select: Add slot `empty` (#13769)

* Select: add test case for slot `empty`

examples/docs/en-US/select.md

@@ -681,8 +681,8 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | remote-method | custom remote search method | function | — | — |
 | loading | whether Select is loading data from server | boolean | — | false |
 | loading-text | displayed text while loading data from server | string | — | Loading |
-| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
-| no-data-text | displayed text when there is no options | string | — | No data |
+| no-match-text | displayed text when no data matches the filtering query, you can also use slot `empty` | string | — | No matching data |
+| no-data-text | displayed text when there is no options, you can also use slot `empty` | string | — | No data |
 | popper-class | custom class name for Select's dropdown | string | — | — |
 | reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | — | false |
 | default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | - | false |
@@ -704,6 +704,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 |---------|-------------|
 |    —    | Option component list |
 | prefix  | content as Select prefix |
+| empty  | content when there is no options |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/es/select.md

@@ -686,8 +686,8 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 | remote               | si las opciones se traeran desde el servidor | boolean  | —                 | false            |
 | remote-method        | metodo de busqueda remota personalizada  | function | —                 | —                |
 | loading              | si Select está cargando datos del servidor | boolean  | —                 | false            |
-| loading-text         | texto mostrado durante la carga de datos del servidor | string   | —                 | Loading          |
-| no-match-text        | texto mostrado cuando ningún dato coincide con la consulta de filtrado. | string   | —                 | No matching data |
+| loading-text         | texto mostrado durante la carga de datos del servidor, 也可以使用`slot="empty"`设置 | string   | —                 | Loading          |
+| no-match-text        | texto mostrado cuando ningún dato coincide con la consulta de filtrado. 也可以使用`slot="empty"`设置| string   | —                 | No matching data |
 | no-data-text         | texto mostrado cuando no hay opciones    | string   | —                 | No data          |
 | popper-class         | nombre de clase personalizado para el menú desplegable del Select | string   | —                 | —                |
 | reserve-keyword      | cuando `multiple` y `filter` es `true`, si se debe reservar la palabra clave actual después de seleccionar una opción. | boolean  | —                 | false            |
@@ -710,6 +710,7 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
 |---------|-------------|
 |    —    | lista de los componentes Option |
 | prefix  | contenido prefix de un  Select |
+| empty | 无选项时的列表 |
 
 ### Atributos del grupo de opciones
 | Atributo | Descripción                              | Tipo    | Valores aceptados | Por defecto |

examples/docs/zh-CN/select.md

@@ -676,8 +676,8 @@
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
 | loading-text | 远程加载时显示的文字 | string | — | 加载中 |
-| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
-| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
+| no-match-text | 搜索条件无匹配时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无匹配数据 |
+| no-data-text | 选项为空时显示的文字，也可以使用`slot="empty"`设置 | string | — | 无数据 |
 | popper-class | Select 下拉框的类名 | string | — | — |
 | reserve-keyword | 多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
 | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
@@ -699,6 +699,7 @@
 |---------|---------|
 |    —    | Option 组件列表 |
 | prefix  | Select 组件头部内容 |
+| empty | 无选项时的列表 |
 
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/select/src/select.vue

@@ -121,12 +121,12 @@
           </el-option>
           <slot></slot>
         </el-scrollbar>
-        <p
-          class="el-select-dropdown__empty"
-          v-if="emptyText &&
-            (!allowCreate || loading || (allowCreate && options.length === 0 ))">
+        <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
+          <slot name="empty" v-if="$slots.empty"></slot>
+          <p class="el-select-dropdown__empty" v-else>
             {{ emptyText }}
           </p>
+        </template>
       </el-select-menu>
     </transition>
   </div>

test/unit/specs/select.spec.js

@@ -801,6 +801,26 @@ describe('Select', () => {
     }, 10);
   });
 
+  it('render slot `empty`', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value">
+            <div class="empty-slot" slot="empty">EmptySlot</div>
+          </el-select>
+        </div>
+      `,
+      data() {
+        return {
+          value: 1
+        };
+      }
+    });
+
+    expect(vm.$el.querySelector('.empty-slot').innerText).to.be.equal('EmptySlot');
+    done();
+  });
+
   describe('resetInputHeight', () => {
     const getSelectComponentVm = (configs) => {
       vm = getSelectVm(configs || {});