A query table linkage configuration method and device based on vue

Abstract

This invention relates to the field of front-end interface interaction and program configuration technology, and provides a query table linkage configuration method and device based on Vue.js. The method includes: creating a configuration panel component; defining two controllable configuration parameters for it, corresponding to the page query area and table columns respectively, through Vue.js's two-way binding mechanism; establishing a mapping relationship between the query area configuration key and the table column configuration key; modifying the two controllable configuration parameters through user operations to achieve two-way linkage between the configuration panel and the page query area and table column configurations, dynamically editing the display configuration of the query area and table columns without modifying the original business code; and setting slots in the configuration panel component to hold any host page element that triggers the configuration panel, thereby enabling the configuration panel to be called within the page. This invention can completely decouple configuration logic from business logic, reduce maintenance costs, and significantly reduce the cost of modifying legacy code.

Description

Technical Field

[0001] The present invention relates to the technical field of front - end interface interaction and program configuration, and particularly to a query table linkage configuration method and device implemented based on vue. Background Technique

[0002] In front - end development, the query table page is a common form of data display and interaction. Different users have different operation habits and attention dimensions. Therefore, in actual business scenarios, it is often necessary to support the display - hide configuration of table columns and implement the linkage display - hide between table columns and the filtering conditions in the page query area. For example, when a user hides a certain table column, the corresponding query condition should also be automatically hidden; conversely, when a certain table column is displayed, the corresponding query condition should also be automatically displayed. This linkage configuration requirement is particularly common in data - intensive background management systems.

[0003] For the above requirements, there are mainly two current mainstream solutions:

[0004] The first solution is to encapsulate independent page query components and table configuration components separately. Developers encapsulate a configurable component for the query area and another configurable component for the table area. Users need to perform configuration operations in the two components separately to keep the display states of the query conditions and table columns consistent. The defect of this solution is that the user configuration steps are cumbersome, and it is necessary to repeatedly compare the configuration results in the two places. The operation experience is poor and it is easy to make mistakes due to inconsistent configurations.

[0005] The second solution is to encapsulate the query area and table area of the entire page into a large component, and implement the linkage configuration logic between query conditions and table columns inside this large component. Users only need to operate a configuration panel to control the display - hide states of the query area and table area at the same time. However, this solution has obvious defects: since the business logic and configuration logic of the entire page are coupled inside a large component, when the business scenario is complex, the maintenance cost of the component increases sharply; in addition, for the scenario of transforming non - configurable old code into configurable code, this solution requires a complete rewrite and re - encapsulation of the original code, and the transformation cost is quite huge.

[0006] The patent with the publication number CN117251656A provides a method for generating a table page. This solution focuses on building a new page from scratch and has the following deficiencies in practical applications: the configuration panel only configures the table itself, and the configuration logic is coupled with the component.

[0007] In summary, existing technologies suffer from several drawbacks when handling linked configuration requirements for query tables, including cumbersome user operations, high coupling between configuration logic and business logic, and high costs associated with modifying legacy code. Therefore, providing a linked configuration method that can decouple configuration logic, simplify user operations, and reduce modification costs has become an urgent technical problem to be solved. Summary of the Invention

[0008] In view of this, in order to overcome the shortcomings of the prior art, the present invention aims to provide a query table linkage configuration method and device based on Vue.

[0009] According to a first aspect of the present invention, a method for configuring linked query tables based on Vue is provided, the method comprising:

[0010] Step S1: Create a configuration panel component and define two controllable configuration parameters for it, corresponding to the page query area and the table column respectively, through Vue's two-way binding mechanism, to establish a mapping relationship between the configuration key of the query area and the configuration key of the table column;

[0011] Step S2: Modify two controllable configuration parameters through user operation to achieve two-way binding and linkage between the configuration panel and the page query area and table column configurations, and dynamically edit the display configuration of the query area and table columns without modifying the original business code;

[0012] Step S3: Set a slot in the configuration panel component to hold any host page element that triggers the configuration panel, so as to realize the calling of the configuration panel in the page.

[0013] Optionally, in the query table linkage configuration method implemented by Vue in this invention, in step S1, two controllable configuration parameters are defined in the following way through the Vue two-way binding mechanism: the configuration object of the page query area and the configuration object of the table column are defined as the props property of the configuration panel component, and a two-way data synchronization channel is established between the parent component and the configuration panel component through the v-model directive or the .sync modifier.

[0014] Optionally, in the query table linkage configuration method implemented by Vue in this invention, in step S1, a mapping relationship between the configuration key of the associated query area and the configuration key of the table column is established in the following way: a mapping table object is maintained inside the configuration panel component. The mapping table object uses the configuration key of the table column as the key and the configuration key corresponding to the page query area as the value. When the key names of the two are inconsistent, the correct correspondence and linkage control between configuration items are realized through the mapping table.

[0015] Optionally, in the query table linkage configuration method implemented by Vue in this invention, step S2 involves modifying the two controllable configuration parameters through user operations, including: the configuration panel component provides a visual configuration interface, on which the user operates on the display or hiding of query conditions, the display or hiding of table columns, and the sorting of table columns; the configuration panel component captures user operations through Vue's event listening mechanism and triggers the corresponding configuration parameter updates.

[0016] Optionally, in the query table linkage configuration method implemented by Vue in this invention, step S2 enables bidirectional binding and linkage between the configuration panel and the page query area and table column configurations in the following manner: the configuration panel component internally listens for changes in two controllable configuration parameters. When the parameters change, the changed values ​​are synchronously updated to the reactive data objects on which the page query area component and table column component depend, thereby realizing real-time linkage between the configuration interface and the display interface.

[0017] Optionally, in the query table linkage configuration method implemented by Vue in this invention, in step S2, the configuration panel component listens for changes in two controllable configuration parameters through Vue's watch listener or computed property.

[0018] Optionally, in the query table linkage configuration method implemented by Vue in this invention, in step S2, the display configuration of the query area and table columns is dynamically edited without modifying the original business code. This is achieved by introducing the configuration panel component as an independent plugin into the original page. The configuration panel component only establishes a connection with the data source of the query area and table area of ​​the original page through the configuration parameters exposed to the outside.

[0019] Optionally, in the query table linkage configuration method implemented by Vue in this invention, in step S3, a slot is set in the configuration panel component as follows: one or more slot tags are defined in the template of the configuration panel component. The slot is used to receive a custom DOM element passed in by the parent component. The custom DOM element includes a button, icon, floating ball or menu item. When the user clicks the custom DOM element, the configuration panel is opened.

[0020] Optionally, in the query table linkage configuration method implemented by Vue in this invention, in step S3, the configuration panel can be opened in any one of the following ways: pop-up modal, side drawer, or drop-down overlay. The configuration panel component maintains a boolean type visible variable to control the display and hidden state of the control panel. The visible variable switches its state by listening to the click event of the host element in the slot, and synchronizes the current open or closed state of the panel to the parent component through Vue's event mechanism.

[0021] According to a second aspect of the present invention, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the method described in the first aspect of the present invention.

[0022] The present invention provides a query table linkage configuration method and device based on Vue, which has the following beneficial technical effects:

[0023] 1. Configuration logic is completely decoupled from business logic, reducing maintenance costs.

[0024] This allows for centralized management and separate maintenance of configuration-related code. Even if business logic changes, there is no need to modify the configuration panel components, significantly reducing code maintenance costs in complex business scenarios.

[0025] II. Significantly reduce the cost of modifying old code

[0026] For scenarios that require transforming legacy, non-configurable code into configurable code, developers do not need to modify any business code, template code, or style code in the original page query area and table area. They can simply import the configuration panel component and pass in the corresponding configuration parameters to complete the transformation, which greatly reduces the cost of configurable upgrades of legacy systems.

[0027] III. User-friendly operation and optimized configuration experience

[0028] Users can easily configure the display, hiding, and sorting of query conditions and table columns by operating through a unified configuration interface. This greatly simplifies the operation steps and significantly improves the accuracy of the configuration.

[0029] IV. The configuration panel offers flexible triggering methods and strong adaptability.

[0030] The trigger button of the configuration panel can be placed anywhere on the page, including any DOM element such as buttons, icons, and menu items. The display form of the configuration panel can also be flexibly selected as a pop-up, drawer, or drop-down overlay, which can adapt to various extreme needs of the product and improve the versatility and reusability of the component. Attached Figure Description

[0031] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0032] Figure 1 This is a flowchart illustrating a query table linkage configuration method based on Vue, according to an exemplary embodiment of the present invention.

[0033] Figure 2 This is a schematic diagram of the structure of the device provided by the present invention. Detailed Implementation

[0034] The embodiments of the present invention will now be described in detail with reference to the accompanying drawings.

[0035] It should be noted that, in the absence of conflict, the following embodiments and features can be combined with each other; and, based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0036] It should be noted that various aspects of embodiments within the scope of the appended claims are described below. It will be apparent that the aspects described herein can be embodied in a wide variety of forms, and any particular structure and / or function described herein is merely illustrative. Based on this disclosure, those skilled in the art will understand that one aspect described herein can be implemented independently of any other aspect, and two or more of these aspects can be combined in various ways. For example, any number of aspects set forth herein can be used to implement the device and / or practice the method. Additionally, this device and / or method can be implemented using structures and / or functionalities other than one or more of the aspects set forth herein.

[0037] This invention provides an exemplary embodiment of a query table linkage configuration method based on Vue, aiming to solve the problems of cumbersome operation, high code coupling, and high cost of modifying old code when linking table column configuration with page query area configuration in the prior art. The method in this embodiment utilizes Vue's two-way binding mechanism to completely decouple the configuration logic into an independent configuration panel component. Two controllable configuration object parameters control the display and sorting configuration of the page query area and table columns respectively, and a key mapping relationship is established to handle scenarios with inconsistent naming. Simultaneously, a slot mechanism enables flexible invocation of the configuration panel.

[0038] Figure 1 This is a flowchart illustrating a query table linkage configuration method based on Vue, according to an exemplary embodiment of the present invention. Figure 1 As shown, in this embodiment, the method of the present invention is implemented in the following manner:

[0039] Step S1: Create a configuration panel component and define two controllable configuration parameters for it, corresponding to the page query area and the table column respectively, through Vue's two-way binding mechanism, to establish a mapping relationship between the configuration key of the query area and the configuration key of the table column.

[0040] In this embodiment, two controllable configuration parameters are defined using Vue's two-way data binding mechanism as follows: the configuration objects for the page query area and the table columns are defined as props properties of the configuration panel component, respectively. A two-way data synchronization channel is established between the parent component and the configuration panel component using the v-model directive or the .sync modifier. A mapping table object is maintained internally within the configuration panel component. This mapping table object uses the configuration key of the table column as the key and the configuration key corresponding to the page query area as the value. When the key names of the two are inconsistent, the mapping table is used to achieve correct correspondence and linkage control between configuration items.

[0041] In this embodiment, Vue (full name Vue.js) is a progressive JavaScript framework for building user interfaces. It employs the core concepts of reactive data binding and component-based development, allowing developers to efficiently build interactive web interfaces through a declarative, data-driven approach. Vue's two-way data binding mechanism refers to the automatic synchronization between the data model and the view within the Vue framework. When the data model changes, the view automatically updates; conversely, when a user interacts with the view (such as through form input), the data model also updates automatically. This mechanism can be implemented in Vue using the `v-model` directive.

[0042] Step S2: Modify two controllable configuration parameters through user operation to achieve two-way binding and linkage between the configuration panel and the page query area and table column configurations, and dynamically edit the display configuration of the query area and table columns without modifying the original business code.

[0043] In this embodiment, the configuration panel component provides a visual configuration interface. Users can operate on this interface to show or hide query conditions, show or hide table columns, and sort table columns. The configuration panel component captures user operations through Vue's event listening mechanism and triggers corresponding configuration parameter updates.

[0044] The configuration panel component uses Vue's watch listener or computed property to monitor changes in two controllable configuration parameters. When the parameters change, the changed values ​​are synchronously updated to the reactive data objects that the page query area component and table column component depend on, achieving real-time linkage between the configuration interface and the display interface.

[0045] The configuration panel component is introduced into the original page as an independent plugin. The configuration panel component only establishes a connection with the data source of the original page's query area and table area through the configuration parameters exposed to the outside world. The business logic code, template code and style code of the original component do not need to be modified to obtain configuration linkage capability.

[0046] Step S3: Set a slot in the configuration panel component to hold any host page element that triggers the configuration panel, so as to realize the calling of the configuration panel in the page.

[0047] In this embodiment, one or more slot tags are defined in the template of the configuration panel component. The slot is used to receive custom DOM elements passed in by the parent component. The custom DOM elements include buttons, icons, floating balls or menu items. When the user clicks on the custom DOM element, the configuration panel is opened.

[0048] In this embodiment, the configuration panel can be opened in any of the following ways: a pop-up modal, a side drawer, or a drop-down overlay. The configuration panel component maintains a boolean variable `visible` to control the display and hiding state of the control panel. This `visible` variable switches its state by listening to the click event of the host element in the slot, and synchronizes the current open or closed state of the panel to the parent component through Vue's event mechanism.

[0049] When the method of this embodiment is applicable to the configurable transformation of old query table pages, the configuration panel component is directly installed into the target page. The configuration panel component receives the configuration key list of the original page query area and the configuration key list of the table columns, and establishes a linkage correspondence between the two through the mapping relationship. Without rewriting or reconstructing any business code of the original query area and table area, the transformation can be completed and the linkage configuration function can be realized.

[0050] Compared with the prior art, the query table linkage configuration method based on Vue provided in this embodiment of the invention has the following beneficial technical effects:

[0051] 1. Configuration logic is completely decoupled from business logic, reducing maintenance costs.

[0052] By creating an independent configuration panel component and leveraging Vue's two-way data binding controllable parameter principle, the configuration logic for the table columns and the page query area is completely extracted from the original business logic. The configuration panel component exists independently of the business logic of the page query area and table area; they only interact with each other through configuration parameters, without intrusion. This allows for centralized management and separate maintenance of configuration-related code. Even if business logic changes, there is no need to modify the configuration panel component, significantly reducing code maintenance costs in complex business scenarios.

[0053] II. Significantly reduce the cost of modifying old code

[0054] This system leverages Vue's two-way data binding mechanism to enable data linkage between the configuration panel and the page's query and table areas. The configuration panel component only connects to existing components through controllable configuration parameters exposed to the outside world. For scenarios requiring the transformation of legacy, non-configurable code into configurable code, developers do not need to modify any business logic, template code, or style code in the original page's query and table areas. They can simply import the configuration panel component and pass in the corresponding configuration parameters to complete the transformation, significantly reducing the cost of configurable upgrades for legacy systems.

[0055] III. User-friendly operation and optimized configuration experience

[0056] This solution uses a single configuration panel component to control both the page query area configuration and table column configuration, establishing a mapping between query area configuration keys and table column configuration keys. This resolves the issues of existing solutions where users need to configure in two separate components, repeatedly comparing settings, and are prone to errors. Users can now operate within a unified configuration interface to achieve linked display, hiding, and sorting configurations of query conditions and table columns, significantly simplifying the operation and improving configuration accuracy.

[0057] IV. The configuration panel offers flexible triggering methods and strong adaptability.

[0058] A slot is defined within the configuration panel component to dynamically pass in the host page element that triggers the display of the configuration panel. This design allows the trigger button of the configuration panel to be placed anywhere on the page, including any DOM element such as buttons, icons, and menu items. The display format of the configuration panel can also be flexibly selected as a pop-up, drawer, or drop-down overlay, which can adapt to various extreme needs of the product and improve the versatility and reusability of the component.

[0059] like Figure 2 As shown, the present invention also provides a device including a processor 310, a communication interface 320, a memory 330 for storing processor-executable computer programs, and a communication bus 340. The processor 310, communication interface 320, and memory 330 communicate with each other via the communication bus 340. The processor 310 executes the executable computer program to implement the aforementioned query table linkage configuration method based on Vue.js.

[0060] The computer program in memory 330, when implemented as a software functional unit and sold or used as an independent product, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as a USB flash drive, a portable hard drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0061] The system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected based on actual needs to achieve the purpose of this embodiment. Those skilled in the art can understand and implement this without any creative effort.

[0062] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., including several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods of various embodiments or some parts of embodiments.

[0063] The above description is merely a specific embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for configuring linked query tables based on Vue, characterized in that, The method includes: Step S1: Create a configuration panel component and define two controllable configuration parameters for it, corresponding to the page query area and the table column respectively, through Vue's two-way binding mechanism, to establish a mapping relationship between the configuration key of the query area and the configuration key of the table column; Step S2: Modify two controllable configuration parameters through user operation to achieve two-way binding and linkage between the configuration panel and the page query area and table column configurations, and dynamically edit the display configuration of the query area and table columns without modifying the original business code; Step S3: Set a slot in the configuration panel component to hold any host page element that triggers the configuration panel, so as to realize the calling of the configuration panel in the page.

2. The query table linkage configuration method based on Vue as described in claim 1, characterized in that, In step S1, two controllable configuration parameters are defined in the following way using Vue's two-way binding mechanism: the configuration object of the page query area and the configuration object of the table column are defined as the props property of the configuration panel component, and a two-way data synchronization channel is established between the parent component and the configuration panel component through the v-model directive or the .sync modifier.

3. The query table linkage configuration method based on Vue as described in claim 1, characterized in that, In step S1, the mapping relationship between the configuration key for the associated query area and the configuration key for the table column is established in the following way: a mapping table object is maintained inside the configuration panel component. The mapping table object uses the configuration key of the table column as the key and the configuration key corresponding to the page query area as the value. When the key names of the two are inconsistent, the correct correspondence and linkage control between the configuration items are realized through the mapping table.

4. The query table linkage configuration method based on Vue as described in claim 1, characterized in that, In step S2, the two controllable configuration parameters are modified through user operations, including: the configuration panel component provides a visual configuration interface, on which the user can operate on the display or hiding of query conditions, the display or hiding of table columns, and the sorting of table columns. The configuration panel component captures user operations through Vue's event listening mechanism and triggers the corresponding configuration parameter updates.

5. The query table linkage configuration method based on Vue as described in claim 1, characterized in that, In step S2, the configuration panel is made to achieve two-way binding and linkage with the page query area and table column configuration in the following way: The configuration panel component listens for changes in two controllable configuration parameters. When the parameters change, the changed values ​​are synchronously updated to the responsive data objects on which the page query area component and table column component depend, so as to achieve real-time linkage between the configuration interface and the display interface.

6. The query table linkage configuration method based on Vue as described in claim 5, characterized in that, In step S2, the configuration panel component listens for changes in two controllable configuration parameters through Vue's watch listener or computed property.

7. The query table linkage configuration method based on Vue as described in claim 1, characterized in that, In step S2, the display configuration of the query area and table columns is dynamically edited without modifying the original business code. This is achieved by introducing the configuration panel component as an independent plugin into the original page. The configuration panel component only establishes a connection with the data source of the query area and table area of ​​the original page through the configuration parameters exposed to the outside world.

8. The query table linkage configuration method based on Vue as described in claim 1, characterized in that, In step S3, slots are set in the configuration panel component as follows: one or more slot tags are defined in the template of the configuration panel component. The slot is used to receive custom DOM elements passed in by the parent component. The custom DOM elements include buttons, icons, floating balls or menu items. When the user clicks on the custom DOM element, the configuration panel is opened.

9. The query table linkage configuration method based on Vue as described in claim 8, characterized in that, In step S3, the configuration panel can be opened in any of the following ways: a pop-up modal, a side drawer, or a drop-down overlay. The configuration panel component maintains a boolean variable called `visible` to control the display and hiding state of the control panel. This `visible` variable switches its state by listening to the click event of the host element in the slot, and synchronizes the current open or closed state of the panel with the parent component through Vue's event mechanism.

10. A computer device, characterized in that, The computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the method according to any one of claims 1-9.

Images