mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-21 01:02:59 +08:00
feat(components): [select] Add max-collapse-tags prop (#11378)
* feat(components): [select] Add max-collapse-tags prop closed #7429 * feat(components): [select] * feat(components): update * feat: update * feat: update * feat: update
This commit is contained in:
kooriookami
GitHub
parent
b112830d54
commit
4ea9fb344f
@ -117,46 +117,47 @@ If the binding value of Select is an object, make sure to assign `value-key` as
|
||||
|
||||
## Select Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| --------------------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ------------------- | ---------------- |
|
||||
| model-value / v-model | binding value | array / string / number / boolean / object | — | — |
|
||||
| multiple | whether multiple-select is activated | boolean | true / false | false |
|
||||
| disabled | whether Select is disabled | boolean | true / false | false |
|
||||
| value-key | unique identity key name for value, required when value is an object | string | — | value |
|
||||
| size | size of Input | string | large/default/small | default |
|
||||
| clearable | whether select can be cleared | boolean | true / false | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | true / false | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| autocomplete | the autocomplete attribute of select input | string | — | off |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | true / false | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | true / false | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | true / false | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| remote-show-suffix | in remote search method show suffix icon | boolean | true / false | false |
|
||||
| loading | whether Select is loading data from server | boolean | true / false | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| 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 | — | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | object | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | true / false | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | true / false | false |
|
||||
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | true / false | true |
|
||||
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | true / false | false |
|
||||
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | true / false | false |
|
||||
| suffix-icon | Custom suffix icon component | `string \| Component` | — | ArrowDown |
|
||||
| suffix-transition<DeprecatedTag /> | animation when dropdown appears/disappears icon | boolean | true / false | true |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
| validate-event | whether to trigger form validation | boolean | true / false | true |
|
||||
| placement | position of dropdown | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start |
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------- |
|
||||
| model-value / v-model | binding value | array / string / number / boolean / object | — | — |
|
||||
| multiple | whether multiple-select is activated | boolean | true / false | false |
|
||||
| disabled | whether Select is disabled | boolean | true / false | false |
|
||||
| value-key | unique identity key name for value, required when value is an object | string | — | value |
|
||||
| size | size of Input | string | large/default/small | default |
|
||||
| clearable | whether select can be cleared | boolean | true / false | false |
|
||||
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | true / false | false |
|
||||
| collapse-tags-tooltip | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true | boolean | true / false | false |
|
||||
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |
|
||||
| name | the name attribute of select input | string | — | — |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | string | light |
|
||||
| autocomplete | the autocomplete attribute of select input | string | — | off |
|
||||
| placeholder | placeholder | string | — | Select |
|
||||
| filterable | whether Select is filterable | boolean | true / false | false |
|
||||
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | true / false | false |
|
||||
| filter-method | custom filter method | function | — | — |
|
||||
| remote | whether options are loaded from server | boolean | true / false | false |
|
||||
| remote-method | custom remote search method | function | — | — |
|
||||
| remote-show-suffix | in remote search method show suffix icon | boolean | true / false | false |
|
||||
| loading | whether Select is loading data from server | boolean | true / false | false |
|
||||
| loading-text | displayed text while loading data from server | string | — | Loading |
|
||||
| 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 | — | — |
|
||||
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/docs/v2/) | object | — | — |
|
||||
| reserve-keyword | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option | boolean | true / false | true |
|
||||
| default-first-option | select first matching option on enter key. Use with `filterable` or `remote` | boolean | true / false | false |
|
||||
| popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | true / false | true |
|
||||
| teleported | whether select dropdown is teleported to the body | boolean | true / false | true |
|
||||
| persistent | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed | boolean | true / false | true |
|
||||
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | true / false | false |
|
||||
| clear-icon | Custom clear icon component | `string \| Component` | — | CircleClose |
|
||||
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | true / false | false |
|
||||
| suffix-icon | Custom suffix icon component | `string \| Component` | — | ArrowDown |
|
||||
| suffix-transition<DeprecatedTag /> | animation when dropdown appears/disappears icon | boolean | true / false | true |
|
||||
| tag-type | tag type | string | success/info/warning/danger | info |
|
||||
| validate-event | whether to trigger form validation | boolean | true / false | true |
|
||||
| placement | position of dropdown | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start |
|
||||
| max-collapse-tags ^(2.3.0) | The max tags number to be shown. To use this, `collapse-tags` must be true | number | — | 1 |
|
||||
|
||||
:::warning
|
||||
|
||||
|
||||
@ -50,6 +50,25 @@
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<p>use max-collapse-tags</p>
|
||||
<el-select
|
||||
v-model="value4"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
:max-collapse-tags="3"
|
||||
placeholder="Select"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -58,6 +77,7 @@ import { ref } from 'vue'
|
||||
const value1 = ref([])
|
||||
const value2 = ref([])
|
||||
const value3 = ref([])
|
||||
const value4 = ref([])
|
||||
const options = [
|
||||
{
|
||||
value: 'Option1',
|
||||
|
||||
@ -1085,6 +1085,55 @@ describe('Select', () => {
|
||||
expect(tags[3].textContent).toBe('蚵仔煎')
|
||||
})
|
||||
|
||||
test('multiple select with maxCollapseTags', async () => {
|
||||
wrapper = _mount(
|
||||
`
|
||||
<el-select v-model="selectedList" multiple collapseTags :max-collapse-tags="3" placeholder="请选择">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
`,
|
||||
() => ({
|
||||
options: [
|
||||
{
|
||||
value: '选项1',
|
||||
label: '黄金糕',
|
||||
},
|
||||
{
|
||||
value: '选项2',
|
||||
label: '双皮奶',
|
||||
},
|
||||
{
|
||||
value: '选项3',
|
||||
label: '蚵仔煎',
|
||||
},
|
||||
{
|
||||
value: '选项4',
|
||||
label: '龙须面',
|
||||
},
|
||||
{
|
||||
value: '选项5',
|
||||
label: '北京烤鸭',
|
||||
},
|
||||
],
|
||||
selectedList: [],
|
||||
})
|
||||
)
|
||||
await wrapper.find('.select-trigger').trigger('click')
|
||||
const options = getOptions()
|
||||
|
||||
options[0].click()
|
||||
await nextTick()
|
||||
options[1].click()
|
||||
await nextTick()
|
||||
options[2].click()
|
||||
await nextTick()
|
||||
const triggerWrappers = wrapper.findAll('.el-tooltip__trigger')
|
||||
expect(triggerWrappers[0]).toBeDefined()
|
||||
const tags = document.querySelectorAll('.el-select__tags-text')
|
||||
expect(tags.length).toBe(3)
|
||||
})
|
||||
|
||||
test('multiple remove-tag', async () => {
|
||||
wrapper = _mount(
|
||||
`
|
||||
|
||||
@ -36,81 +36,85 @@
|
||||
:class="nsSelect.e('tags')"
|
||||
:style="selectTagsStyle"
|
||||
>
|
||||
<span
|
||||
<transition
|
||||
v-if="collapseTags && selected.length"
|
||||
:class="[
|
||||
nsSelect.b('tags-wrapper'),
|
||||
{ 'has-prefix': prefixWidth && selected.length },
|
||||
]"
|
||||
@after-leave="resetInputHeight"
|
||||
>
|
||||
<el-tag
|
||||
:closable="!selectDisabled && !selected[0].isDisabled"
|
||||
:size="collapseTagSize"
|
||||
:hit="selected[0].hitState"
|
||||
:type="tagType"
|
||||
disable-transitions
|
||||
@close="deleteTag($event, selected[0])"
|
||||
<span
|
||||
:class="[
|
||||
nsSelect.b('tags-wrapper'),
|
||||
{ 'has-prefix': prefixWidth && selected.length },
|
||||
]"
|
||||
>
|
||||
<span :class="nsSelect.e('tags-text')" :style="tagTextStyle">
|
||||
{{ selected[0].currentLabel }}
|
||||
</span>
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="selected.length > 1"
|
||||
:closable="false"
|
||||
:size="collapseTagSize"
|
||||
:type="tagType"
|
||||
disable-transitions
|
||||
>
|
||||
<el-tooltip
|
||||
v-if="collapseTagsTooltip"
|
||||
:disabled="dropMenuVisible"
|
||||
:fallback-placements="['bottom', 'top', 'right', 'left']"
|
||||
:effect="effect"
|
||||
placement="bottom"
|
||||
:teleported="teleported"
|
||||
<el-tag
|
||||
v-for="item in showTagList"
|
||||
:key="getValueKey(item)"
|
||||
:closable="!selectDisabled && !item.isDisabled"
|
||||
:size="collapseTagSize"
|
||||
:hit="item.hitState"
|
||||
:type="tagType"
|
||||
disable-transitions
|
||||
@close="deleteTag($event, item)"
|
||||
>
|
||||
<template #default>
|
||||
<span :class="nsSelect.e('tags-text')"
|
||||
>+ {{ selected.length - 1 }}</span
|
||||
>
|
||||
</template>
|
||||
<template #content>
|
||||
<div :class="nsSelect.e('collapse-tags')">
|
||||
<div
|
||||
v-for="(item, idx) in selected.slice(1)"
|
||||
:key="idx"
|
||||
:class="nsSelect.e('collapse-tag')"
|
||||
<span :class="nsSelect.e('tags-text')" :style="tagTextStyle">
|
||||
{{ item.currentLabel }}
|
||||
</span>
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="selected.length > maxCollapseTags"
|
||||
:closable="false"
|
||||
:size="collapseTagSize"
|
||||
:type="tagType"
|
||||
disable-transitions
|
||||
>
|
||||
<el-tooltip
|
||||
v-if="collapseTagsTooltip"
|
||||
:disabled="dropMenuVisible"
|
||||
:fallback-placements="['bottom', 'top', 'right', 'left']"
|
||||
:effect="effect"
|
||||
placement="bottom"
|
||||
:teleported="teleported"
|
||||
>
|
||||
<template #default>
|
||||
<span :class="nsSelect.e('tags-text')"
|
||||
>+ {{ selected.length - maxCollapseTags }}</span
|
||||
>
|
||||
<el-tag
|
||||
</template>
|
||||
<template #content>
|
||||
<div :class="nsSelect.e('collapse-tags')">
|
||||
<div
|
||||
v-for="item in collapseTagList"
|
||||
:key="getValueKey(item)"
|
||||
class="in-tooltip"
|
||||
:closable="!selectDisabled && !item.isDisabled"
|
||||
:size="collapseTagSize"
|
||||
:hit="item.hitState"
|
||||
:type="tagType"
|
||||
disable-transitions
|
||||
:style="{ margin: '2px' }"
|
||||
@close="deleteTag($event, item)"
|
||||
:class="nsSelect.e('collapse-tag')"
|
||||
>
|
||||
<span
|
||||
:class="nsSelect.e('tags-text')"
|
||||
:style="{
|
||||
maxWidth: inputWidth - 75 + 'px',
|
||||
}"
|
||||
>{{ item.currentLabel }}</span
|
||||
<el-tag
|
||||
class="in-tooltip"
|
||||
:closable="!selectDisabled && !item.isDisabled"
|
||||
:size="collapseTagSize"
|
||||
:hit="item.hitState"
|
||||
:type="tagType"
|
||||
disable-transitions
|
||||
:style="{ margin: '2px' }"
|
||||
@close="deleteTag($event, item)"
|
||||
>
|
||||
</el-tag>
|
||||
<span
|
||||
:class="nsSelect.e('tags-text')"
|
||||
:style="{
|
||||
maxWidth: inputWidth - 75 + 'px',
|
||||
}"
|
||||
>{{ item.currentLabel }}</span
|
||||
>
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-tooltip>
|
||||
<span v-else :class="nsSelect.e('tags-text')"
|
||||
>+ {{ selected.length - 1 }}</span
|
||||
>
|
||||
</el-tag>
|
||||
</span>
|
||||
<!-- <div> -->
|
||||
</template>
|
||||
</el-tooltip>
|
||||
<span v-else :class="nsSelect.e('tags-text')"
|
||||
>+ {{ selected.length - maxCollapseTags }}</span
|
||||
>
|
||||
</el-tag>
|
||||
</span>
|
||||
</transition>
|
||||
<transition v-if="!collapseTags" @after-leave="resetInputHeight">
|
||||
<span
|
||||
:class="[
|
||||
@ -136,7 +140,6 @@
|
||||
</el-tag>
|
||||
</span>
|
||||
</transition>
|
||||
<!-- </div> -->
|
||||
<input
|
||||
v-if="filterable"
|
||||
ref="input"
|
||||
@ -380,6 +383,10 @@ export default defineComponent({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maxCollapseTags: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
teleported: useTooltipContentProps.teleported,
|
||||
persistent: {
|
||||
type: Boolean,
|
||||
@ -483,6 +490,8 @@ export default defineComponent({
|
||||
groupQueryChange,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave,
|
||||
showTagList,
|
||||
collapseTagList,
|
||||
} = useSelect(props, states, ctx)
|
||||
|
||||
const { focus } = useFocus(reference)
|
||||
@ -669,6 +678,8 @@ export default defineComponent({
|
||||
tagTextStyle,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave,
|
||||
showTagList,
|
||||
collapseTagList,
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
@ -369,7 +369,6 @@ export const useSelect = (props, states: States, ctx) => {
|
||||
|
||||
// methods
|
||||
const resetInputHeight = () => {
|
||||
if (props.collapseTags && !props.filterable) return
|
||||
nextTick(() => {
|
||||
if (!reference.value) return
|
||||
const input = reference.value.$el.querySelector(
|
||||
@ -859,6 +858,14 @@ export const useSelect = (props, states: States, ctx) => {
|
||||
.every((option) => option.disabled)
|
||||
)
|
||||
|
||||
const showTagList = computed(() =>
|
||||
states.selected.slice(0, props.maxCollapseTags)
|
||||
)
|
||||
|
||||
const collapseTagList = computed(() =>
|
||||
states.selected.slice(props.maxCollapseTags)
|
||||
)
|
||||
|
||||
const navigateOptions = (direction) => {
|
||||
if (!states.visible) {
|
||||
states.visible = true
|
||||
@ -941,6 +948,8 @@ export const useSelect = (props, states: States, ctx) => {
|
||||
dropMenuVisible,
|
||||
queryChange,
|
||||
groupQueryChange,
|
||||
showTagList,
|
||||
collapseTagList,
|
||||
|
||||
// DOM ref
|
||||
reference,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user