Tab label page control method and system based on Element-UI

Abstract

The present disclosure provides an Element-UI-based Tab tab page control method and system, comprising: configuring the opening mode and the refreshing mode of the Tab tab page in advance; when an opening action trigger signal of a page in a web system is received, the display of the page is realized based on the opening mode of the page to be opened which is configured in advance; the opening mode includes opening in a specified name Tab tab page, opening in a current Tab tab page, opening in an existing Tab tab page, and opening in a new Tab tab page, wherein the opening according to the Tab tab page name is finding the tab page with the corresponding name in the Tab management object and replacing it with the page to be opened; for the current page or the jump page, the page is refreshed based on the pre-configured refreshing mode to realize the control of the Tab tab page; wherein the refreshing mode includes no refreshing, global refreshing and local refreshing, and the local refreshing is based on the pre-configured action in the page activation to query the local of the page.

Description

Technical Field

[0001] This disclosure belongs to the field of computer technology, and in particular relates to a tab control method and system based on Element-UI. Background Technology

[0002] The statements in this section are merely background information relating to this disclosure and do not necessarily constitute prior art.

[0003] The inventors discovered that the current Element-UI-based approach to handling tabs involves defining an `el-tag` component and exposing methods to provide dynamic deletion and addition of tabs. However, this approach cannot meet the needs of some special scenarios. For example, if you want to navigate from a list page to a new form page displaying the title "New Form" and then to a modify form page displaying the title "Modify Form," the existing methods use the same component for both new and modify forms. Element-UI does not provide corresponding methods for this. Furthermore, Element-UI does not define how tabs are opened; it only provides methods to add or close a tab.

[0004] Meanwhile, Element-UI does not provide a page caching solution. Although another component, keep-alive, can cache components, it cannot achieve partial refresh. For example, when caching is enabled, if you open a list tab, go from the list tab to the add tab, and then jump back from the add tab to the list tab, it cannot meet the requirement that the list page retains the original query data. Summary of the Invention

[0005] To address the aforementioned issues, this disclosure provides a Tab control method and system based on Element-UI. This solution, by setting different opening methods, can enable opening in a Tab with a specified name, in the current Tab, in an existing Tab, or in a new Tab, effectively meeting diverse user needs. Furthermore, by pre-configuring different refresh methods for Tabs, the solution can achieve page refresh without page refresh during navigation, partial page refresh, or global page refresh, satisfying users' needs to retain original page data or partial data in certain specific scenarios.

[0006] According to a first aspect of the embodiments of this disclosure, a Tab control method based on Element-UI is provided, comprising:

[0007] Configure the opening and refresh methods for tabs in advance;

[0008] When a page opening action trigger signal is received within the web system, the page is displayed based on the pre-configured opening method of the page to be opened. The opening method includes opening in a tab with a specified name, opening in the current tab, opening in an existing tab, and opening in a new tab. Specifically, opening by tab name means: finding a tab with the corresponding name in the tab management object based on the specified name and replacing it with the page to be opened.

[0009] For the current page or the page to be navigated to, the page is refreshed based on a pre-configured refresh method to control the tabs; wherein, the refresh method includes no refresh, global refresh, and partial refresh, and the partial refresh is based on a pre-configured action in page activation to query a part of the page.

[0010] Furthermore, opening under the current tab specifically involves: finding the currently active tab in the Tab management object by recording the currently active tab, and replacing it with the page to be opened; opening under an existing tab specifically involves: implementing page navigation based on the tab path and configuration parameters; if a tab with the same path and configuration parameters exists, that page is activated; otherwise, navigation is performed to the previous tab of the current page for display.

[0011] Furthermore, the global refresh is achieved by deleting the component state to re-render the component; the partial refresh is achieved by combining Vue's lifecycle. If the route jump is between different cached components, the refresh method is determined by the activated lifecycle method of Vue, and a pre-set data request method is called to refresh.

[0012] Furthermore, if the route jumps to a component that is always active, the refresh method is determined by the beforeRouteUpdate lifecycle method in Vue, and a pre-defined data request method is called to refresh the component.

[0013] Furthermore, the method adds caching processing to tabs with input requirements based on keep-alive to ensure that they are not rendered repeatedly during tab switching.

[0014] According to a second aspect of the present disclosure, a Tab control system based on Element-UI is provided, comprising:

[0015] The configuration unit is used to pre-configure the opening and refresh methods of tabs;

[0016] The page navigation control unit is used to display the page based on the pre-configured opening method of the page to be opened when it receives a page opening action trigger signal within the web system. The opening method includes opening in a tab with a specified name, opening in the current tab, opening in an existing tab, and opening in a new tab. Specifically, opening by tab name means: finding a tab with the corresponding name in the tab management object based on the specified name and replacing it with the page to be opened.

[0017] The page refresh unit is used to refresh the current page or the page to which the page is redirected based on a pre-configured refresh method to control the tab page; wherein, the refresh method includes no refresh, global refresh and partial refresh, and the partial refresh is based on a pre-configured action in page activation to query a part of the page.

[0018] According to a third aspect of the present disclosure, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and running on the memory, wherein the processor executes the program to implement the Element-UI-based Tab control method described above.

[0019] According to a fourth aspect of the present disclosure, a non-transitory computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements the aforementioned Element-UI-based Tab control method.

[0020] Compared with the prior art, the beneficial effects of this disclosure are:

[0021] This disclosure provides a Tab control method and system based on Element-UI. The solution allows users to open tabs in different ways: with a specified name, in the current tab, in an existing tab, or in a new tab, effectively meeting diverse user needs. Furthermore, by pre-configuring different refresh methods for tabs, the solution enables page refresh without navigation, partial page refresh, or global page refresh, satisfying users' needs to retain original or partial page data in specific scenarios.

[0022] Advantages of this disclosure in additional aspects will be set forth in part in the description which follows, and in part will be obvious from the description, or may be learned by practice of this disclosure. Attached Figure Description

[0023] The accompanying drawings, which form part of this disclosure, are used to provide a further understanding of this disclosure. The illustrative embodiments of this disclosure and their descriptions are used to explain this disclosure and do not constitute an undue limitation of this disclosure.

[0024] Figure 1 This is a flowchart of a Tab control method based on Element-UI as described in an embodiment of this disclosure. Detailed Implementation

[0025] The present disclosure will be further described below with reference to the accompanying drawings and embodiments.

[0026] It should be noted that the following detailed descriptions are illustrative and intended to provide further explanation of this disclosure. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this disclosure pertains.

[0027] It should be noted that the terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the exemplary embodiments according to this disclosure. As used herein, the singular form is intended to include the plural form as well, unless the context clearly indicates otherwise. Furthermore, it should be understood that when the terms “comprising” and / or “including” are used in this specification, they indicate the presence of features, steps, operations, devices, components, and / or combinations thereof.

[0028] Where there is no conflict, the embodiments and features described herein can be combined with each other.

[0029] Terminology Explanation:

[0030] Tabs: A page tab tool that adds a tab above the page area each time the menu bar is clicked. Tabs can be closed and pages can be switched. They are commonly found in backend management systems.

[0031] Page tab: a shorthand for a single, individual tab page;

[0032] Page: This refers to the corresponding page that is opened in the system. Usually, one page corresponds to one tab.

[0033] Example 1:

[0034] The purpose of this embodiment is to provide a tab control method based on Element-UI.

[0035] like Figure 1 As shown, a tab control method based on Element-UI includes:

[0036] Configure the opening and refresh methods for tabs in advance;

[0037] When a page opening action trigger signal is received within the web system, the page is displayed based on the pre-configured opening method of the page to be opened. The opening method includes opening in a tab with a specified name, opening in the current tab, opening in an existing tab, and opening in a new tab. Specifically, opening by tab name means: finding a tab with the corresponding name in the tab management object based on the specified name and replacing it with the page to be opened.

[0038] For the current page or the page to be navigated to, the page is refreshed based on a pre-configured refresh method to control the tabs; wherein, the refresh method includes no refresh, global refresh, and partial refresh, and the partial refresh is based on a pre-configured action in page activation to query a part of the page.

[0039] Furthermore, opening under the current tab specifically involves: finding the currently active tab in the Tab management object by recording the currently active tab, and replacing it with the page to be opened; opening under an existing tab specifically involves: implementing page navigation based on the tab path and configuration parameters; if a tab with the same path and configuration parameters exists, that page is activated; otherwise, navigation is performed to the previous tab of the current page for display.

[0040] Furthermore, the global refresh is achieved by deleting the component state to re-render the component; the partial refresh is achieved by combining Vue's lifecycle. If the route jump is between different cached components, the refresh method is determined by the activated lifecycle method of Vue, and a pre-set data request method is called to refresh.

[0041] Furthermore, if the route jumps to a component that is always active, the refresh method is determined by the beforeRouteUpdate lifecycle method in Vue, and a pre-defined data request method is called to refresh the component.

[0042] Furthermore, the method adds caching processing to tabs with input requirements based on keep-alive to ensure that they are not rendered repeatedly during tab switching.

[0043] Specifically, for ease of understanding, the following detailed description of the solution in this embodiment is provided in conjunction with the accompanying drawings:

[0044] First, it should be noted that web pages within a web system primarily open in two ways: one is within the system framework, and the other is outside the system, i.e., in a new browser tab. This embodiment mainly discusses opening web pages within the system, a scenario that primarily includes the following requirements:

[0045] (1) Jump to a specified page: Specify a page within the system. For example, after submitting a process form, jump to the process to-do list page.

[0046] (2) Redirect to the source page: Based on the source page remembered by the configuration item, redirect to the source page, and the tab will be updated. This is suitable for scenarios such as clicking "Add Form" on a list page, saving successfully, and then returning to the source page.

[0047] (3) Jump to the previous tab: Jump to the tab tag before the current tab. Suitable for normal page closing scenarios.

[0048] (4) Jump to the source tab: Jump to the tab where the source page is located. Only the page is updated, and the tab name will not be updated.

[0049] This embodiment provides a tab control method based on Element-UI. For ease of understanding, the implementation of the different requirements mentioned above will be explained below:

[0050] First, the relevant definitions are given:

[0051] Tab object:

[0052] ①title: Tab title;

[0053] ②fullPath: The complete path to the tab (including query parameters);

[0054] ③path: Tab path;

[0055] ④ name: Name. If the component has a name, it corresponds to the component's name. If the component does not have a name, it corresponds to the path.

[0056] Parameters required for managing tabs:

[0057] ①tablePageTitle: Tab title. TablePageTitles is the Chinese name of the page used for display, which has the same meaning as the Title in the Tab object;

[0058] ②tabName: Tab name; Tab name is generally the English name of the tab, or it can be a unique identifier composed of English letters and numbers. It is generally not used for display on the page.

[0059] ③openType: Opening mode, 0 (open by tabName), 1 (open on current page), 2 (open in an existing tab), 3 (new tab);

[0060] ④refresh: Refresh mode: 0 (no refresh), 1 (partial refresh), 2 (global refresh);

[0061] ⑤clearCache: Clears the cache; true (clears), false (does not clear);

[0062] Secondly, the specific implementation method is as follows:

[0063] Methods for managing tabs:

[0064] ①Page title

[0065] Tab titles are set when a tab is added or replaced by passing the tab title in the redirect route.

[0066] ② How to open

[0067] There are four ways to open it:

[0068] a. Open in the current tab;

[0069] b. Tab with a specified name: Opens or activates the page based on the configured name. Each tab has a unique name. If the specified name does not exist, a new tab will be opened; if it exists, the existing page will be replaced with the page to navigate to, and the tab with the specified name will be activated.

[0070] c. Existing Tab: Redirect based on the specified page path and parameters. If a page with the same path and configuration parameters exists, activate that page; otherwise, open a new page.

[0071] d. New Tab: Opens a new tab;

[0072] Specifically, opening a tab under the current tab is achieved by recording the currently active tab, searching for the active tab in the tab management object, and replacing it with the newly opened tab. Opening a tab under a specified name requires passing a `tabName` parameter. The tab management object searches for a tab with the same `tabName` and replaces it with the newly opened tab. For an existing tab, navigation is based on the path and parameters. If a page with the same path and configuration parameters exists, that page is activated; otherwise, navigation returns to the previous tab.

[0073] ③ Page caching and refresh methods

[0074] There are three ways to refresh a page: no refresh, global refresh, and partial refresh.

[0075] a. Do not refresh: Do not refresh the page after redirection.

[0076] b. Global refresh: The page displayed upon entry is the same as the first time it is opened.

[0077] c. Partial refresh: Invokes the action configured in the page activation to query (refresh) a portion of the page.

[0078] Using keep-a live, tabs with caching are not re-rendered during switching. For example, when filling out a form for a procurement application, if you've already filled in the basic information, and then navigate to another tab to view some notes, the information you've already entered will be retained when you return to the procurement application form. The advantages are reduced loading time and performance overhead, and improved user experience.

[0079] Global refresh is achieved by deleting the component's state and causing it to re-render. Partial refresh is achieved by combining Vue's lifecycle methods. If the route navigates between different cached components, the refresh method is determined in Vue's `act-ivated` lifecycle hook, and the appropriate method, such as a list data request method, is called to refresh the component. If the route navigates to a component that is always active, the refresh method is determined in Vue's `beforeRouteUpdate` lifecycle hook, and the appropriate method, such as a list data request method, is called to refresh the component.

[0080] Specifically:

[0081] (1) Redirect to the specified page:

[0082] If the selected page path (pathObj.path) exists, jump to the specified path (jumpPath), specifically satisfying the following constraints:

[0083] If the page to be navigated to has the same full path as the current route, the current page will not be closed; if closing the current page is configured and the page is opened using the current page method, the cache will be cleared; otherwise, the current tab will be closed.

[0084] If the source page (paramsObj.isSaveFrom) of the redirected page is the current page, then the current page is recorded during the redirect.

[0085] If the source page of the redirected page is an open page, record the open page when redirecting;

[0086] If the page to be redirected to (pathObj) has the same full path as the current route, and it's a global refresh, then a redirect will occur, replacing the current URL. A global refresh is equivalent to refreshing the browser window, while a redirect redirects one browser path to another. A global refresh is achieved by redirecting to a browser path that points to the current path, effectively refreshing the current page.

[0087] (2) Redirect to the source page:

[0088] Based on the current route (with page signature), obtain the fullPath. Find the open page for this full path from the source relationship, assign the path of the open page to pathObj.path, the query condition of the open page to pathObj.query, and the system parameters (including tag name) of the open page (query.systemParams) to the parameter pathObj.query.systemParams. Then jump to the specified path (jumpPath).

[0089] (3) Jump to the previous tab:

[0090] Based on the full path of the current route (fullPath), find the index of the current tab in the visited views (Tabs). If found, decrement the index by 1, which is the index of the previous tab. Assign the path of the previous tab (path) to (pathObj.path), assign the query condition of the previous tab to pathObj.query, and assign the tabName in pathObj.query.systemParams to the tab name of the previous tab, setting the open type (openType) to new tab. Then, jump to the specified path (jumpPath).

[0091] (4) Jump to the source tab:

[0092] Obtain the full path (with tabName) based on the current route. Locate the source page for this full path from the source relationship, obtain the tabName of the source page, find the view corresponding to the tabName in the visited Views, and replace the path and query in pathObj (except for systemParams) with the values ​​of the source tab, then redirect to the specified page. If the view corresponding to the tabName is not found in the opened views, redirect to the previous tab.

[0093] Example 2:

[0094] The purpose of this embodiment is to provide a Tab control system based on Element-UI.

[0095] A tab control system based on Element-UI includes:

[0096] The configuration unit is used to pre-configure the opening and refresh methods of tabs;

[0097] The page navigation control unit is used to display the page based on the pre-configured opening method of the page to be opened when it receives a page opening action trigger signal within the web system. The opening method includes opening in a tab with a specified name, opening in the current tab, opening in an existing tab, and opening in a new tab. Specifically, opening by tab name means: finding a tab with the corresponding name in the tab management object based on the specified name and replacing it with the page to be opened.

[0098] The page refresh unit is used to refresh the current page or the page to which the page is redirected based on a pre-configured refresh method to control the tab page; wherein, the refresh method includes no refresh, global refresh and partial refresh, and the partial refresh is based on a pre-configured action in page activation to query a part of the page.

[0099] Furthermore, the system described in this embodiment corresponds to the method described in Embodiment 1, and its technical details have been described in detail in Embodiment 1, so they will not be repeated here.

[0100] In further embodiments, the following is also provided:

[0101] An electronic device includes a memory and a processor, as well as computer instructions stored in the memory and running on the processor. When executed by the processor, the computer instructions perform the method described in Embodiment 1. For brevity, further details are omitted here.

[0102] It should be understood that in this embodiment, the processor can be a central processing unit (CPU), or it can be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or any conventional processor, etc.

[0103] Memory may include read-only memory and random access memory, and provides instructions and data to the processor. A portion of memory may also include non-volatile random access memory. For example, memory may also store information about the device type.

[0104] A computer-readable storage medium for storing computer instructions, which, when executed by a processor, perform the method described in Embodiment 1.

[0105] The method in Embodiment 1 can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor. The software modules can reside in readily available storage media in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory; the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the above method. To avoid repetition, a detailed description is not provided here.

[0106] Those skilled in the art will recognize that the units, i.e., algorithm steps, of the various examples described in connection with this embodiment can be implemented in electronic hardware or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this disclosure.

[0107] The above embodiments provide a Tab control method and system based on Element-UI, which can be implemented and has broad application prospects.

[0108] The above description is merely a preferred embodiment of this disclosure and is not intended to limit this disclosure. Various modifications and variations can be made to this disclosure by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A Tab Control Method Based on Element-UI, characterized in that, include: Configure the opening and refresh methods for tabs in advance; When a page opening action trigger signal is received within the web system, the page is displayed based on the pre-configured opening method of the page to be opened. The opening methods include opening in a tab with a specified name, opening in the current tab, opening in an existing tab, and opening in a new tab. Specifically, opening in a tab with a specified name involves finding a tab with the corresponding name in the tab management object and replacing it with the page to be opened. Opening in the current tab involves finding the currently active tab in the tab management object by recording the currently active tab and replacing it with the page to be opened. For the current page or the page to be navigated to, the page is refreshed based on a pre-configured refresh method to control the tabs. The refresh methods include no refresh, global refresh, and partial refresh. Partial refresh is based on a pre-configured action during page activation, querying a specific part of the page. Partial refresh is implemented using Vue's lifecycle. If the route navigates between different cached components, the refresh method is determined in Vue's `activated` lifecycle method, and a pre-defined data request method is called to refresh the page. If the route navigates to a component that is always active, the refresh method is determined in Vue's `beforeRouteUpdate` lifecycle method, and a pre-defined data request method is called to refresh the page.

2. The Tab control method based on Element-UI as described in claim 1, characterized in that, This includes opening an existing tab. Specifically, the page will be redirected based on the tab path and configuration parameters. If a tab with the same path and configuration parameters exists, that tab will be activated. Otherwise, the page will be redirected to the previous tab of the current page.

3. The Tab control method based on Element-UI as described in claim 1, characterized in that, This includes the global refresh being achieved by deleting the component's state to cause the component to re-render.

4. The Tab control method based on Element-UI as described in claim 1, characterized in that, The method includes adding caching processing to tabs with input requirements based on keep-alive to ensure that they are not rendered repeatedly during tab switching.

5. A Tab Control System Based on Element-UI, characterized in that, include: The configuration unit is used to pre-configure the opening and refresh methods of tabs; The page navigation control unit, upon receiving a page opening action trigger signal within the web system, displays the page based on a pre-configured opening method. The opening methods include opening to a tab with a specified name, opening to the current tab, opening to an existing tab, and opening to a new tab. Specifically, opening to a tab with a specified name involves finding a tab with the corresponding name in the tab management object and replacing it with the page to be opened. Opening to the current tab involves recording the currently active tab, finding it in the tab management object, and replacing it with the page to be opened. The page refresh unit is used to refresh the current page or the page to be navigated to based on a pre-configured refresh method, thereby controlling the tab page. The refresh methods include no refresh, global refresh, and partial refresh. Partial refresh is based on a pre-configured action during page activation, querying a specific part of the page. Partial refresh is implemented using Vue's lifecycle. If the route navigates between different cached components, the refresh method is determined in Vue's `activated` lifecycle method, and a pre-defined data request method is called to refresh the page. If the route navigates to a component that is always active, the refresh method is determined in Vue's `beforeRouteUpdate` lifecycle method, and a pre-defined data request method is called to refresh the page.

6. The Tab Control System Based on Element-UI as described in claim 5, characterized in that, This includes opening an existing tab. Specifically, the page will be redirected based on the tab path and configuration parameters. If a tab with the same path and configuration parameters exists, that tab will be activated. Otherwise, the page will be redirected to the previous tab of the current page.

7. A Tab Control System Based on Element-UI as described in claim 5, characterized in that, This includes the global refresh being achieved by deleting the component's state to cause the component to re-render.

8. An electronic device comprising a memory, a processor, and a computer program stored in the memory and running thereon, characterized in that, When the processor executes the program, it implements a Tab control method based on Element-UI as described in any one of claims 1-4.

9. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that... When the program is executed by the processor, it implements a Tab control method based on Element-UI as described in any one of claims 1-4.

Images