From f55fbdb051f95d52e92f7a66aee9a58e41025771 Mon Sep 17 00:00:00 2001 From: Harlan Date: Tue, 19 Feb 2019 14:36:09 +0800 Subject: [PATCH] Select: add slot `empty` (#13785) * Select: Add slot `empty` (#13769) * Select: add test case for slot `empty` --- examples/docs/en-US/select.md | 5 +++-- examples/docs/es/select.md | 5 +++-- examples/docs/zh-CN/select.md | 5 +++-- packages/select/src/select.vue | 12 ++++++------ test/unit/specs/select.spec.js | 20 ++++++++++++++++++++ 5 files changed, 35 insertions(+), 12 deletions(-) diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md index 7da13f677..8d574cb20 100644 --- a/examples/docs/en-US/select.md +++ b/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 | diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md index e2c83fb34..487ff6b7a 100644 --- a/examples/docs/es/select.md +++ b/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 | diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md index bffb8e5e5..d2fbac3ae 100644 --- a/examples/docs/zh-CN/select.md +++ b/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 | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index feb68fd5d..907bd4d4e 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -121,12 +121,12 @@ -

- {{ emptyText }} -

+ diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js index b9ec39cd2..cb1898ab9 100644 --- a/test/unit/specs/select.spec.js +++ b/test/unit/specs/select.spec.js @@ -801,6 +801,26 @@ describe('Select', () => { }, 10); }); + it('render slot `empty`', done => { + vm = createVue({ + template: ` +
+ +
EmptySlot
+ +
+ `, + data() { + return { + value: 1 + }; + } + }); + + expect(vm.$el.querySelector('.empty-slot').innerText).to.be.equal('EmptySlot'); + done(); + }); + describe('resetInputHeight', () => { const getSelectComponentVm = (configs) => { vm = getSelectVm(configs || {});