mirror of https://github.com/ElemeFE/element
Select: add slot `empty` (#13785)
* Select: Add slot `empty` (#13769) * Select: add test case for slot `empty`pull/14422/head
parent
a54802c71a
commit
f55fbdb051
|
@ -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 | — | — |
|
| remote-method | custom remote search method | function | — | — |
|
||||||
| loading | whether Select is loading data from server | boolean | — | false |
|
| loading | whether Select is loading data from server | boolean | — | false |
|
||||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
| 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-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 | string | — | No 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 | — | — |
|
| 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 |
|
| 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 |
|
| 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 |
|
| — | Option component list |
|
||||||
| prefix | content as Select prefix |
|
| prefix | content as Select prefix |
|
||||||
|
| empty | content when there is no options |
|
||||||
|
|
||||||
### Option Group Attributes
|
### Option Group Attributes
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Attribute | Description | Type | Accepted Values | Default |
|
||||||
|
|
|
@ -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 | si las opciones se traeran desde el servidor | boolean | — | false |
|
||||||
| remote-method | metodo de busqueda remota personalizada | function | — | — |
|
| remote-method | metodo de busqueda remota personalizada | function | — | — |
|
||||||
| loading | si Select está cargando datos del servidor | boolean | — | false |
|
| loading | si Select está cargando datos del servidor | boolean | — | false |
|
||||||
| loading-text | texto mostrado durante la carga de datos del servidor | string | — | Loading |
|
| 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. | string | — | No matching data |
|
| 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 |
|
| 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 | — | — |
|
| 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 |
|
| 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 |
|
| — | lista de los componentes Option |
|
||||||
| prefix | contenido prefix de un Select |
|
| prefix | contenido prefix de un Select |
|
||||||
|
| empty | 无选项时的列表 |
|
||||||
|
|
||||||
### Atributos del grupo de opciones
|
### Atributos del grupo de opciones
|
||||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||||
|
|
|
@ -676,8 +676,8 @@
|
||||||
| remote-method | 远程搜索方法 | function | — | — |
|
| remote-method | 远程搜索方法 | function | — | — |
|
||||||
| loading | 是否正在从远程获取数据 | boolean | — | false |
|
| loading | 是否正在从远程获取数据 | boolean | — | false |
|
||||||
| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
|
| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
|
||||||
| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
|
| no-match-text | 搜索条件无匹配时显示的文字,也可以使用`slot="empty"`设置 | string | — | 无匹配数据 |
|
||||||
| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
|
| no-data-text | 选项为空时显示的文字,也可以使用`slot="empty"`设置 | string | — | 无数据 |
|
||||||
| popper-class | Select 下拉框的类名 | string | — | — |
|
| popper-class | Select 下拉框的类名 | string | — | — |
|
||||||
| reserve-keyword | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
|
| reserve-keyword | 多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词 | boolean | — | false |
|
||||||
| default-first-option | 在输入框按下回车,选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
|
| default-first-option | 在输入框按下回车,选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
|
||||||
|
@ -699,6 +699,7 @@
|
||||||
|---------|---------|
|
|---------|---------|
|
||||||
| — | Option 组件列表 |
|
| — | Option 组件列表 |
|
||||||
| prefix | Select 组件头部内容 |
|
| prefix | Select 组件头部内容 |
|
||||||
|
| empty | 无选项时的列表 |
|
||||||
|
|
||||||
### Option Group Attributes
|
### Option Group Attributes
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|
|
@ -121,12 +121,12 @@
|
||||||
</el-option>
|
</el-option>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<p
|
<template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
|
||||||
class="el-select-dropdown__empty"
|
<slot name="empty" v-if="$slots.empty"></slot>
|
||||||
v-if="emptyText &&
|
<p class="el-select-dropdown__empty" v-else>
|
||||||
(!allowCreate || loading || (allowCreate && options.length === 0 ))">
|
|
||||||
{{ emptyText }}
|
{{ emptyText }}
|
||||||
</p>
|
</p>
|
||||||
|
</template>
|
||||||
</el-select-menu>
|
</el-select-menu>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -801,6 +801,26 @@ describe('Select', () => {
|
||||||
}, 10);
|
}, 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', () => {
|
describe('resetInputHeight', () => {
|
||||||
const getSelectComponentVm = (configs) => {
|
const getSelectComponentVm = (configs) => {
|
||||||
vm = getSelectVm(configs || {});
|
vm = getSelectVm(configs || {});
|
||||||
|
|
Loading…
Reference in New Issue