Implementation method of pull-down multi-choice box for dynamically maximizing number of displayed labels

Abstract

The invention provides a method for realizing pull-down of a multi-choice box with dynamically maximized label display quantity, and belongs to the technical field of Web front-end development, the method comprises the following steps: creating invisible analog display elements corresponding to current selected options by responding to state change of a graphical user interface; obtaining the current available display width of the display container; calculating a simulated total width based on the width of the simulated display element; and according to the comparison of the simulation total width and the available display width, the maximum label display number which can be completely displayed without overflowing in the display container is dynamically determined. According to the method, the problem of container space waste or content overflow caused by fixed label display quantity in the prior art is solved, full-automatic and self-adaptive optimization of the label display quantity under different screen sizes and different label contents is realized, and the response type adaptation capability and the space utilization rate of the component are remarkably improved.

Description

Technical Field

[0001] This invention relates to the field of web front-end development technology, and in particular to a method for implementing a dropdown multi-select box that dynamically maximizes the number of labels displayed. Background Technology

[0002] With the diversification of display device sizes, responsive design has become a fundamental requirement for web front-end development. Modern UI component libraries based on Vue.js, such as ElementPlus, are widely used. Their selector components, in multi-select mode, display the user-selected items as tags in the input box.

[0003] To maintain a visually appealing layout and prevent content overflow within the limited input field space, existing selector components typically provide a "maximum number of collapsed tags" (maxCollapseTags) configuration parameter. Developers need to preset a fixed value, and the component will always display the first (maxCollapseTags-1) tags in the input field, with the remaining tags collapsed in numerical form (such as "+N").

[0004] Patent CN116643750A discloses a method, system, device, and medium for creating dynamic text boxes. This method dynamically replaces the original text boxes by creating alternative text boxes, transforming a fixed input area into a variable input area. It dynamically adjusts the height and width based on whether focus is acquired and sets the cursor movement by processing the cursor position, thus fixing the text box in a specified position and avoiding localized errors, achieving dynamic display of the input content. However, this fixed-number approach has significant drawbacks: 1) Mismatch between static configuration and dynamic content: The width of each tag varies with the length of its text content. When the total tag width is small, the input box will have wasted space; when the total tag width is large, it will overflow the fixed-width input box, disrupting the layout. 2) Inability to adapt to responsive layouts: In responsive design, the width of the input box dynamically adjusts with the viewport size. A fixed `maxCollapseTags` value will inevitably cause overflow when the input box becomes small, and will result in insufficient space utilization when the input box becomes large. This is essentially a conflict between static layout strategies and dynamic content and containers, which affects user experience and the interface's adaptability. Summary of the Invention

[0005] This invention aims to solve at least one of the technical problems existing in the prior art, and proposes a method for implementing a drop-down multi-select box that dynamically maximizes the number of tags displayed, in order to solve the problems of space waste, tag overflow and poor responsiveness caused by the static configuration of maxCollapseTags in the prior art.

[0006] This invention provides a method for implementing a dropdown multi-select box that dynamically maximizes the number of labels displayed, applied to a graphical user interface including at least one display container for displaying selected labels. The method includes: In response to a state change in the graphical user interface related to the display container, create one or more simulated display elements corresponding to the currently selected option; Obtain the current available display width of the display container; Based on the element width of each of the one or more simulated display elements, calculate the total simulated width required to arrange the simulated display elements sequentially within the display container; Based on the comparison between the simulated total width and the currently available display width, the maximum number of labels that can be fully displayed within the display container without overflowing is dynamically determined.

[0007] Preferably, the creation of one or more simulated display elements corresponding to the currently selected option includes: In the document object model structure of the graphical user interface, create at least one auxiliary container element; Within the auxiliary container element, a simulated label element is generated for each currently selected option; The auxiliary container element and the simulated label element are set to be invisible in the graphical user interface and not to affect user interaction.

[0008] Preferably, the auxiliary container element and the simulated tag element are set to be invisible and not affect user interaction by at least one of the following style properties: setting the z-index property of the Cascading Style Sheet to a negative value, setting the position property to fixed, and setting the opacity property to 0.

[0009] Preferably, the state changes associated with the display container include at least one of the following: The dimensions of the display container itself change; The set of currently selected options has changed; The drop-down menu data associated with the currently selected option has changed.

[0010] Preferably, obtaining the current available display width of the display container includes: Obtain the total width of the display container; Obtain the width of the indicator element reserved within the display container for displaying the number of labels that are not fully displayed; The currently available display width is obtained by subtracting the width of the indicator element from the total width.

[0011] Preferably, the step of dynamically determining the maximum number of labels to be displayed based on the comparison between the simulated total width and the currently available display width includes: According to the preset arrangement order, the element width and the spacing width between each simulated display element are added sequentially to obtain the cumulative width; When the cumulative width is greater than the current available display width for the first time when the Nth simulated display element is added, the maximum number of labels to be displayed is determined to be N-1; where N is a positive integer.

[0012] Preferably, the method further includes: The dynamically determined maximum number of tags to display is set as a configuration parameter of the drop-down selection component, so that the drop-down selection component renders the corresponding number of selected tags in the display container according to the maximum number of tags to display.

[0013] Preferably, the creation of the simulated display element in response to a state change related to the display container in the graphical user interface is triggered by listening to a size change event of the display container or a data change event of the currently selected option.

[0014] Preferably, the creation of one or more simulated display elements corresponding to the currently selected option specifically includes: Create a new optimized selector view file and import the element selector component; In the template tag of the optimized selector view file, use a block-level tag as the root element and set the reference attribute to the selector root block; Create two child elements, an element selector and a helper block, under the root element.

[0015] Preferably, after obtaining the current available display width of the display container, the method further includes: Bind the variable `maximum_collapse_tags` to the `maximum_collapse_tags` attribute of the element selector; Bind the selected value of the element selector to a variable sub-selected value using two-way data binding; By binding all attributes to an element selector through attribute binding, the refactoring selector can inherit all attributes of the element selector. The slots are obtained by using the slot method, and all slots of the element selector are inherited by traversing the slots. Create a dynamic calculation method for the optimal maximum collapsible label value to handle selector width labels; Listen for the default selected value attribute model value of the optimizer component, and call the process to handle the selector width tag in real time every time the model value changes.

[0016] The technical effect of the dropdown multi-selection box method for dynamically maximizing the number of labels disclosed in this invention is that it always displays as many selected labels as possible without overflowing, effectively avoiding waste of UI space and maximizing space utilization. Furthermore, it fundamentally eliminates the overflow problem caused by excessively large total label width, ensuring a clean and consistent page layout. Attached Figure Description

[0017] Figure 1 This is a flowchart illustrating a method for implementing a dropdown multi-select box that dynamically maximizes the number of labels displayed, as provided in an embodiment of the present invention. Figure 2 This is a schematic diagram of the optimized dropdown selection ouSelect component encapsulation process provided in an embodiment of the present invention; Figure 3 This is a schematic diagram of the ouSelect component structure provided in an embodiment of the present invention. Detailed Implementation

[0018] To enable those skilled in the art to better understand the technical solutions of the present invention, exemplary embodiments of the present invention are described below in conjunction with the accompanying drawings, including various details of the embodiments of the present invention to aid understanding. These should be considered merely exemplary. Therefore, those skilled in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0019] refer to Figures 1 to 3 As shown, a method for dynamically maximizing the number of tabs displayed in a dropdown multi-selection box is applied to a graphical user interface containing at least one display container for displaying selected tabs. This method can be integrated into a Vue 3 framework and Element Plus component library, which re-encapsulates an optimized selector, ouSelect, for a dropdown multi-selection box component that dynamically maximizes the number of tabs displayed. This component can automatically calculate and adjust the optimal maximum number of selected tabs displayed internally based on the real-time size of the selected items and the real-time size of the input box, ensuring that the maximum number of selected tabs are displayed in the input box in real time without overflowing the selected tabs; and this component inherits all the functional characteristics of the selector component.

[0020] The method includes the following steps: S1, in response to state changes related to the display container in the graphical user interface, create one or more simulated display elements corresponding to the currently selected option. The component is initialized and enters multi-selection mode. When the state related to the component's display container changes, a dynamic calculation process is triggered. These state changes include, but are not limited to: component mounting completion, browser window size change causing input box width change, user selection or deselection of an option, and drop-down menu option list update.

[0021] The process of creating simulated display elements includes: creating at least one auxiliary container element within the Document Object Model (DOM) structure of the graphical user interface; and generating a simulated label element for each currently selected option within this auxiliary container element. Crucially, the auxiliary container element and the simulated label elements are set to be invisible in the graphical user interface and not to affect user interaction, for example, by setting CSS properties such as z-index:-1, position:fixed, and opacity:0. This method makes the width measurement process imperceptible to the user and does not interfere with normal interface rendering and event handling.

[0022] A more specific approach involves creating a mock element for width measurement in response to state changes. In the template for the optimized component `ouSelect`, in addition to the core `el-select` component, an auxiliary `div` element (`assistantDiv`) is defined. This `assistantDiv` is set to be completely invisible via CSS: `z-index: -1; position:fixed; opacity: 0;`. This `assistantDiv` is only rendered when the component is in multiple selection mode.

[0023] Within the invisible `assistantDiv`, simulated tag elements are dynamically generated, each corresponding one-to-one with the currently selected value array (`childSelectedValue`). The text content and inline styles (such as font, padding, and border) of each simulated tag are completely identical to the actual tags rendered in the `el-select` input box. Simultaneously, a simulated number indicator element (`tagNumberDiv`) is also generated, with a style identical to the "+N" number tag in the actual input box.

[0024] These state changes include: changes in the size of the display container itself, changes in the content of the currently selected options set, or changes in the dropdown menu data associated with the options. By monitoring these changes, it can be ensured that the maximum number of tabs displayed is always synchronized with the latest interface state.

[0025] In a specific implementation scenario: Import the Element Plus component library into the front-end framework (Vue3.js) example project; Input: A front-end framework (Vue3.js) instance project and a component library (Element Plus); Output: A project-integrated component library, providing the basic conditions for using its components.

[0026] Create a new optimized selector view file (ouSelect.vue) and import the element selector component (el-select); Input: Optimize the selector view file (ouSelect.vue) and the element selector component (el-select); Output: Created the initial file structure for the optimized selector component (ouSelect) and introduced the element selector (el-select) as the base component.

[0027] In the template tags of the optimized selector view file (ouSelect.vue), use a block-level tag as the root element and set the reference attribute to the selector root block (selectRootDiv); Input: template, block-level tag (div); Output: The root container of the component is constructed and the reference identifier selector root block (selectRootDiv) is set for it.

[0028] Create two child elements under the root element: an element selector (el-select) and an assistant block (assistantDiv). Input: root element selector root block (selectRootDiv), element selector component (el-select), assistant block (assistantDiv); Output: A component structure containing selectors and helper elements is formed.

[0029] Significance: The creation of an auxiliary block (assistantDiv) is used for subsequent simulation of label size calculations, solving the problem of the inability to dynamically adapt to the number of labels displayed in existing technologies.

[0030] S2, Obtain the current available display width of the display container. Specifically, this includes: obtaining the total width of the display container and subtracting the width of the element reserved within the container for displaying the fold quantity indicator (such as "+2"). This ensures that the calculated space is actually available for placing labels.

[0031] Using the DOM API, first obtain the actual container element inside the input box of the el-select component (e.g., via class name.el-select__input-calculator), and read its clientWidth as the total width inputWidth. Next, read the offsetWidth of the tagNumberDiv element generated in step S1 to obtain the width numWidth of the numeric indicator. Finally, calculate the available width: maxTagWidth = inputWidth - numWidth.

[0032] In a specific implementation scenario: Bind the variable `maxCollapseTags` to the attribute `max-collapse-tags` of the element selector (el-select). Input: el-select element selector component, maximum number of collapsed tags (maxCollapseTags); Output: Implemented dynamic binding between the maximum number of collapsed tags (maxCollapseTags) and selector attributes.

[0033] The selected value of the element selector (el-select) is bound to the variable childSelectedValue through two-way data binding (v-model); Input: el-select element selector component, child-selected value of variable; Output: Implements two-way binding between selected values ​​and variables, facilitating real-time acquisition of user selections.

[0034] By binding all attributes ($attrs) to the element selector (el-select) using attribute binding (v-bind), the optimized selector (ouSelect) can inherit all attributes of the element selector (el-select); Input: All attribute objects ($attrs); Output: The optimized selector component (ouSelect) inherits all the properties of the element selector (el-select).

[0035] Get the passed-in slots by using the slots method (useSlots()), and inherit all slots of the el-select by traversing the slots.

[0036] Input: slots; Output: The optimized selector component (ouSelect) inherits all the slots of the element selector (el-select).

[0037] Define the properties and default values ​​of the optimized selector (ouSelect) using the defineProps method; Input: Property configuration object; Output: The configurable properties and default values ​​of the optimized selector component (ouSelect) are clarified.

[0038] Define a variable called optimizer selector identifier (ouSelectId), and generate a random number to assign to optimizer selector identifier (ouSelectId). Input: None; Output: Generates a unique identifier optimized selector identifier (ouSelectId).

[0039] Bind the multiple attribute to the conditional rendering (v-if) of the assistantDiv element, so that the assistantDiv element is only rendered when multiple selection is enabled; Input: assistant block (assistantDiv), multiple selection attribute (multiple); Output: Implemented conditional rendering for auxiliary elements.

[0040] Significance: To avoid unnecessary waste of computing resources in single-selection mode.

[0041] In the helper block (assistantDiv), iterate through the selected value (childSelectedValue) array and generate child elements in sequence. The style and size of each child element are set to the same style and size as the selected item label displayed in the element selector (el-select) input box. At the same time, the identifier attribute (id) of each child element is assigned the selector identifier (ouSelectId) concatenated with the array index (Index) corresponding to that child element. Input: array of childSelectedValues, assistantDiv, and ouSelectId; Output: A simulated element with the same size as the actual selected item label was generated.

[0042] Significance: This solves the problem of not being able to obtain the width of tags in real time by simulating tag elements.

[0043] In the assistant block (assistantDiv), add an additional child element tagNumberDiv, whose content is the length of the child selected value (childSelectedValue) array, and whose identifier attribute (id) is assigned to the optimized selector identifier (ouSelectId) concatenated with the tag number ('TagNumber'). The style and size are consistent with the number tag on the right side of the input box.

[0044] Input: assistant block (assistantDiv), length of the child selected value (childSelectedValue) array, and optimizer selector identifier (ouSelectId); Output: Simulated elements with generated number labels.

[0045] S3, based on the element width of each of the one or more simulated display elements, calculate the total simulated width required to sequentially arrange the simulated display elements within the display container.

[0046] The simulated total width is calculated based on the simulated elements. The `childSelectedValue` array is traversed, and each `simulatedTag203` in `assistantDiv` is retrieved by its unique ID, and its `offsetWidth` is read. Starting from the first tag, its width is sequentially accumulated along with the preset margin between tags to form the accumulated width `accumulatedWidth`.

[0047] S4. Based on the comparison between the simulated total width and the currently available display width, dynamically determine the maximum number of tags that can be fully displayed within the display container without overflowing. During the accumulation process, a judgment is made: if accumulatedWidth is less than or equal to maxTagWidth, continue accumulating the next tag; if accumulatedWidth exceeds maxTagWidth for the first time when accumulating to the kth tag, it means that at most the first k-1 tags can be fully displayed. At this time, the value of the maximum tag display quantity maxCollapseTags is dynamically set to k-1. The calculated maxCollapseTags is bound to the max-collapse-tags property of the el-select component. The el-select component will render according to this dynamic value, displaying the first maxCollapseTags tags in the input box, and collapsing the remaining number in the form of "+N".

[0048] The specific method for dynamically determining the maximum number of tags to display is as follows: Following the display order of the tags, the width and spacing of each simulated display element are sequentially added to obtain the cumulative width. When the cumulative width exceeds the currently available display width for the first time after adding the Nth element, the maximum number of tags to display is set to N-1. This number is then set as a configuration parameter for the dropdown selection component, guiding the component in its actual rendering.

[0049] In a specific implementation scenario: Create a dynamic calculation method to handle selector width tags (handleSelectWidthTag) and create the optimal maximum number of collapsed tags (maxCollapseTags).

[0050] Sub-steps: Retrieves the input box element of the element selector (el-select) by a specific class name (.el-select__input-calculator); The width of the input box (inputWidth) can be obtained through the client-side width property (clientWidth). The tag number block (tagNumberDiv) element is obtained by retrieving the identifier (id), and the width (numWidth) of the number tag is obtained by reading the offset width attribute (offsetWidth). Subtract the width numeric width (numWidth) from the width of the input box to obtain the maximum width (maxTagWidth) that can be used to display the selected item label in the input box. Iterate through the array of childSelectedValues, obtain the label of each selected item in the assistantDiv by its identifier (id), and obtain the width of the label by its offsetWidth property; The label width and the spacing between labels are accumulated sequentially. When the accumulated label width of the indexed selected item is greater than the maximum label width (maxTagWidth), the optimal value of the maximum number of collapsed labels (maxCollapseTags) can be calculated as index minus one (Index-1).

[0051] Input: Input box element, tagNumberDiv element, childSelectedValue array; Output: Calculate the optimal maximum number of collapsed tags (maxCollapseTags).

[0052] Significance: This solves the problem of tag overflow or wasted space caused by a fixed maximum number of collapsed tags (maxCollapseTags).

[0053] In the onMounted lifecycle function, the size change observer (resizeObserver) monitors the value of the selector root block (selectRootDiv) to listen for changes in the current page size. Whenever the page size changes, the handleSelectWidthTag function is called in real time to update the maximum number of collapsible tags (maxCollapseTags) value.

[0054] Input: selectRootDiv element, resizeObserver; Output: A real-time monitoring mechanism for page size changes has been established.

[0055] Significance: Ensures that the maximum number of collapsed tags (maxCollapseTags) is dynamically adjusted according to the window size.

[0056] In the unmounted lifecycle function (onUnmounted), the listener is disconnected from the size change observer to cancel the listening.

[0057] Input: resizeObserver; Output: Clean up listening resources.

[0058] Listen for the default selected value property model value (props.modelValue) of the ouSelect component. Whenever the model value (modelValue) changes, call the handleSelectWidthTag function in real time to update the maximum number of collapsed tags (maxCollapseTags) value.

[0059] Input: Attribute model value (props.modelValue); Output: Implements real-time response to changes in the selected value.

[0060] Listen for dropdown menus passed in by the Optimize Selector (ouSelect) component. When the dropdown menu is updated, call the handleSelectWidthTag function in real time to update the maximum number of collapsed tags (maxCollapseTags) value.

[0061] Input: Drop-down menu data; Output: Implements real-time response to changes in the option menu.

[0062] Listen to the selected item array (childSelectedValue). When the selected item changes, call the handleSelectWidthTag function in real time to update the maximum number of collapsed tags (maxCollapseTags) value.

[0063] Input: An array of childSelectedValues; Output: Implements real-time response to changes in the selected item.

[0064] By defining the exposure method (defineExpose) to expose the handleSelectWidthTag method, the parent component can freely call the handleSelectWidthTag function in the optimizer component (ouSelect) via reference (ref) to update the maximum number of collapsed tags (maxCollapseTags) value.

[0065] Input: The `handleSelectWidthTag` method; Output: An external calling interface is provided.

[0066] Make the computational auxiliary block (assistantDiv) invisible; Input: Auxiliary block (assistantDiv); Output: The auxiliary element is invisible on the page and does not affect the layout and interaction.

[0067] Significance: To solve the problem of auxiliary elements interfering with the user interface and interaction.

[0068] Sub-steps: Setting the stacking order (z-index) to -1 will not affect the triggering of interactive events for other elements; Set the position to fixed, and remove it from the document flow; Set the opacity to zero (0) so it is not displayed on the page.

[0069] At this point, the component optimization selector (ouSelect) is complete and can be used in this view. Figure 3 It can be imported and used in any other view file (.vue) of a Vue 3.js framework instance project.

[0070] This invention, through the aforementioned technical solution, introduces the Select component from the Element Plus component library into a Vue.js project. Then, it combines this with a dynamic calculation method for the optimal number of selected item tags to display, along with other logic, styles, and interactive features, encapsulating them into a dropdown multi-select component, ouSelect. This component can be imported and used in any .vue file within the project. It not only inherits all the functionalities of the original el-Select component but also automatically calculates and adjusts the maximum number of selected item tags to be displayed based on the content of each selected item, the selection order, and the real-time dynamic size of the input box. This ensures that the input box responsively displays the maximum number of selected item tags without tag overflow, significantly improving the responsiveness of the multi-select selector, reducing coding workload, and greatly enhancing development efficiency, ease of use, and user experience.

[0071] By dynamically calculating, the problem of wasted space or content overflow under fixed-quantity configurations is completely solved, ensuring that the number of displayed tags always achieves an optimal match between the container space and tag content, achieving fully adaptive tag display. When the container size changes due to window resizing, screen rotation, or responsive breakpoint triggering, the method can automatically recalculate and update the displayed quantity, ensuring good component performance on different devices and viewports, perfectly supporting responsive layouts. "Pre-rendering" measurements using invisible auxiliary elements obtain accurate tag widths, making the method accurate and reliable. Simultaneously, performance is optimized through conditional listening (triggered only in multi-select mode or when data changes) and resource cleanup (disconnecting listening when the component is unloaded).

[0072] To ensure real-time performance, this embodiment employs a multi-level monitoring mechanism: Size monitoring: After the component is mounted (onMounted), use the ResizeObserver API to monitor changes in the size of the component's root element. Once a change occurs, immediately re-execute steps S2-S4.

[0073] Data monitoring: Use Vue's watch feature to deeply monitor changes in childSelectedValue (selected value), props.modelValue (externally passed model value), and the data in the option list. Any change will trigger a recalculation.

[0074] Manually trigger interface: By using defineExpose, the core calculation function handleSelectWidthTag is exposed to the parent component, allowing the parent component to actively call it to refresh the state when necessary.

[0075] Example embodiments have been disclosed herein, and while specific terminology has been used, it is for illustrative purposes only and should be construed as such, and is not intended to be limiting. In some instances, it will be apparent to those skilled in the art that features, characteristics, and / or elements described in conjunction with particular embodiments may be used alone, or in combination with features, characteristics, and / or elements described in conjunction with other embodiments, unless otherwise expressly indicated. Therefore, those skilled in the art will understand that various changes in form and detail may be made without departing from the scope of the invention as set forth in the appended claims.

Claims

1. A method for implementing a dropdown multi-select box with dynamically maximized label display quantity, characterized in that, The method, applied to a graphical user interface containing at least one display container for displaying selected labels, includes: In response to a state change in the graphical user interface related to the display container, create one or more simulated display elements corresponding to the currently selected option; Obtain the current available display width of the display container; Based on the element width of each of the one or more simulated display elements, calculate the total simulated width required to arrange the simulated display elements sequentially within the display container; Based on the comparison between the simulated total width and the currently available display width, the maximum number of labels that can be fully displayed within the display container without overflowing is dynamically determined.

2. The method according to claim 1, characterized in that, The creation of one or more simulated display elements corresponding to the currently selected option includes: In the document object model structure of the graphical user interface, create at least one auxiliary container element; Within the auxiliary container element, a simulated label element is generated for each currently selected option; The auxiliary container element and the simulated label element are set to be invisible in the graphical user interface and not to affect user interaction.

3. The method according to claim 2, characterized in that, The auxiliary container element and the simulated tag element are set to be invisible and not affect user interaction by at least one of the following style properties: setting the z-index property of the Cascading Style Sheet to a negative value, setting the position property to fixed, and setting the opacity property to 0.

4. The method according to claim 1, characterized in that, The state changes associated with the display container include at least one of the following: The dimensions of the display container itself change; The set of currently selected options has changed; The drop-down menu data associated with the currently selected option has changed.

5. The method according to claim 1, characterized in that, The step of obtaining the current available display width of the display container includes: Obtain the total width of the display container; Obtain the width of the indicator element reserved within the display container for displaying the number of labels that are not fully displayed; The currently available display width is obtained by subtracting the width of the indicator element from the total width.

6. The method according to claim 1, characterized in that, The step of dynamically determining the maximum number of labels to be displayed based on the comparison between the simulated total width and the currently available display width includes: According to the preset arrangement order, the element width and the spacing width between each simulated display element are added sequentially to obtain the cumulative width; When the cumulative width is greater than the current available display width for the first time when the Nth simulated display element is added, the maximum number of labels to be displayed is determined to be N-1; where N is a positive integer.

7. The method according to claim 1, characterized in that, The method further includes: The dynamically determined maximum number of tags to display is set as a configuration parameter of the drop-down selection component, so that the drop-down selection component renders the corresponding number of selected tags in the display container according to the maximum number of tags to display.

8. The method according to claim 1, characterized in that, The creation of simulated display elements in response to state changes related to the display container in the graphical user interface is triggered by listening to size change events of the display container or data change events of the currently selected option.

9. The method according to claim 1, characterized in that, The creation of one or more simulated display elements corresponding to the currently selected option specifically includes: Create a new optimized selector view file and import the element selector component; In the template tag of the optimized selector view file, use a block-level tag as the root element and set the reference attribute to the selector root block; Create two child elements, an element selector and a helper block, under the root element.

10. The method according to claim 9, characterized in that, The process of obtaining the current available display width of the display container further includes: Bind the variable `maximum_collapse_tags` to the `maximum_collapse_tags` attribute of the element selector; Bind the selected value of the element selector to a variable sub-selected value using two-way data binding; By binding all attributes to an element selector through attribute binding, the refactoring selector can inherit all attributes of the element selector. The slots are obtained by using the slot method, and all slots of the element selector are inherited by traversing the slots. Create a dynamic calculation method for the optimal maximum collapsible label value to handle selector width labels; Listen for the default selected value attribute model value of the optimizer component, and call the process to handle the selector width tag in real time every time the model value changes.

Images