An embedded table query optimization system and method based on Vue and VxeTable

Abstract

The application discloses an embedded table query optimization system and method based on Vue and VxeTable, and relates to the technical field of computer software.The system comprises a Vue framework, which is used as a front-end basic framework and provides data binding and component multiple characteristic functions; a VxeTable table component, which is used for displaying a data table; a self-defined table header filtering component, which is embedded into the table header of the VxeTable and used for receiving filtering conditions input by a user and transmitting the filtering conditions to a back-end data server to realize instant filtering; and a back-end data server, which is used for providing data required for query.The application realizes instant filtering and intuitive query by modifying the table header of the VxeTable and embedding the filtering function directly into the table header.

Description

Technical Field

[0001] This invention relates to the field of computer software technology, and more specifically, to an embedded table query optimization system and method based on Vue and VxeTable. Background Technology

[0002] In traditional web form queries, filter options are typically placed above the table as a separate form. Users need to enter or select filter criteria in the form first, and then click the query button to trigger data updates. As the number of table fields increases, the number of filter options also increases, resulting in excessive interface space usage and cumbersome user operations. Furthermore, frequent changes to interface elements (such as expanding and collapsing filter options) can cause visual distractions and negatively impact the user experience. Therefore, a more efficient, intuitive, and user-friendly form query method is needed. Summary of the Invention

[0003] To overcome or at least partially solve the above problems, this invention provides an embedded table query optimization system and method based on Vue and VxeTable. By modifying the VxeTable header, the filtering function is directly embedded into the header, enabling instant filtering and intuitive querying.

[0004] To solve the above-mentioned technical problems, the technical solution adopted by the present invention is as follows: In a first aspect, this invention provides an embedded table query optimization system based on Vue and VxeTable, including the Vue framework, a VxeTable table component, a custom header filtering component, and a backend data server, wherein: The Vue framework, as a basic front-end framework, provides features such as data binding and componentization. The VxeTable table component is used to display data tables; A custom header filtering component is embedded in the header of VxeTable to receive user-input filtering conditions and pass them to the backend data server to achieve real-time filtering functionality. The backend data server is used to provide the data required for queries.

[0005] This system utilizes the Vue framework, the VxeTable table component, a custom header filtering component, and a backend data server. By modifying the VxeTable header, the filtering functionality is directly embedded within it, with each header cell possessing filtering capabilities. This design not only saves interface space but also makes filtering operations more intuitive and convenient. Furthermore, this invention implements a real-time filtering mechanism: when a user enters or selects filter criteria through the header filtering component, the system updates the table data in real time, eliminating the need for the user to click an additional query button. This instant feedback design improves user query efficiency and enhances the user experience.

[0006] Based on the first aspect, further, the above-mentioned implementation of the real-time filtering function includes: writing filtering logic in the backend data server; when the filtering conditions change, triggering the filtering logic, retrieving data that meets the filtering conditions from the backend data server, and updating the table to realize the real-time filtering function.

[0007] Based on the first aspect, the above-mentioned filtering logic further includes data filtering and sorting operations.

[0008] Building upon the first aspect, further, Vue's event listener mechanism is used to listen for changes in the filter conditions of the custom header filter component.

[0009] Furthermore, based on the first aspect, the embedded table query optimization system based on Vue and VxeTable also includes an interface optimization module for optimizing the style of the custom table header filter component and adjusting the properties of the custom table header filter component.

[0010] Secondly, the present invention provides an embedded table query optimization method based on Vue and VxeTable, which applies the embedded table query optimization system based on Vue and VxeTable as described in the first aspect, comprising the following steps: Import the VxeTable component library into the Vue framework and configure dynamic columns; The dynamic column configuration is passed to the Vxetable header component, and the Vxetable header component automatically generates the corresponding filter items and styles in the header according to the configuration; The filter criteria input by the user are obtained, and the real-time filtering function is implemented based on a custom header filter component and a backend data server.

[0011] This invention modifies the VxeTable header, embedding the filtering function directly into it, with each header cell possessing filtering capabilities. This design not only saves interface space but also makes filtering operations more intuitive and convenient. Furthermore, this invention implements an instant filtering mechanism; when a user enters or selects filter criteria through the header filter component, the system updates the table data in real time, eliminating the need for the user to click an additional search button. This instant feedback design improves user search efficiency and enhances the user experience.

[0012] Based on the second aspect, the above method for setting dynamic column configuration further includes the following steps: Add the selectType attribute to the configuration of dynamic columns to specify the type of filter item.

[0013] Thirdly, this application provides an electronic device including a memory for storing one or more programs; a processor; and, when the one or more programs are executed by the processor, implementing the method as described in any of the first aspects above.

[0014] Fourthly, this application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method as described in any of the first aspects above.

[0015] The present invention has at least the following advantages or beneficial effects: 1. This invention modifies the header of VxeTable to embed the filtering function directly into the header, so that each header cell has the filtering function. This design not only saves interface space, but also makes the filtering operation more intuitive and convenient.

[0016] 2. This invention implements an instant filtering mechanism, meaning that when a user enters or selects filter conditions through the header filter component, the system can update the table data in real time without requiring the user to click an additional query button. This instant feedback design improves user query efficiency and enhances the user experience.

[0017] 3. This invention optimizes the header filtering component to maintain consistency with the overall style of the table, while avoiding frequent changes to interface elements and preserving the stability and aesthetics of the interface. Attached Figure Description

[0018] To more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of the present invention and should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0019] Figure 1 This is an architecture diagram of an embedded table query optimization system based on Vue and VxeTable, according to an embodiment of the present invention. Figure 2 This is a structural block diagram of an electronic device provided in an embodiment of the present invention.

[0020] Explanation of reference numerals in the attached figures: 101, memory; 102, processor; 103, communication interface. Detailed Implementation

[0021] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. The components of the embodiments of the present invention described and shown in the accompanying drawings can generally be arranged and designed in various different configurations.

[0022] Therefore, the following detailed description of the embodiments of the invention provided in the accompanying drawings is not intended to limit the scope of the claimed invention, but merely to illustrate selected embodiments of the invention. All other embodiments obtained by those skilled in the art based on the embodiments of the invention without inventive effort are within the scope of protection of the invention.

[0023] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures.

[0024] It should be noted that, in this document, relational terms such as "first" and "second" are used merely to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the term "comprising" or any other variations thereof is intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0025] In the description of the embodiments of the present invention, "multiple" means at least two.

[0026] Example: like Figure 1As shown, in a first aspect, embodiments of the present invention provide an embedded table query optimization system based on Vue and VxeTable, including the Vue framework, the VxeTable table component, a custom header filtering component, and a backend data server, wherein: The Vue framework, as a basic front-end framework, provides features such as data binding and componentization. The VxeTable table component is used to display data tables; A custom header filtering component is embedded in the header of VxeTable to receive user-input filtering conditions and pass them to the backend data server to achieve real-time filtering functionality. Furthermore, the implementation of the real-time filtering function includes: writing filtering logic in the backend data server; when the filtering conditions change, triggering the filtering logic, retrieving data that meets the filtering conditions from the backend data server, and updating the table to achieve the real-time filtering function. The filtering logic includes data filtering and sorting operations.

[0027] Furthermore, it also includes: using Vue's event listener mechanism to listen for changes in the filter conditions of the custom header filter component.

[0028] In some embodiments of this invention, the header of VxeTable is customized to enable filtering functionality in each header cell. Interactive elements such as input boxes and dropdown menus are added to the header cells, allowing users to directly input or select filtering conditions in the header. Based on the custom header filtering component, the user-input filtering conditions are received and passed to the parent component or backend data service. Filtering logic is written in the parent component or backend data service to update the table data in real time based on the user-input filtering conditions. The system listens for changes in the filtering conditions of the custom header filtering component; when the filtering conditions change, the filtering logic is triggered. Data meeting the conditions is retrieved from the backend data service and updated in the table, achieving instant filtering functionality.

[0029] The backend data server is used to provide the data required for queries.

[0030] This system utilizes the Vue framework, the VxeTable table component, a custom header filtering component, and a backend data server. By modifying the VxeTable header, the filtering functionality is directly embedded within it, with each header cell possessing filtering capabilities. This design not only saves interface space but also makes filtering operations more intuitive and convenient. Furthermore, this invention implements a real-time filtering mechanism: when a user enters or selects filter criteria through the header filtering component, the system updates the table data in real time, eliminating the need for the user to click an additional query button. This instant feedback design improves user query efficiency and enhances the user experience.

[0031] The present invention has the following advantages: Space Saving: Embedding the filtering function in the table header significantly reduces the screen space occupied, making the interface more compact and cleaner. Simplified Operation: Users no longer need to click additional search buttons; they can directly enter or select in the table header to complete the filtering, simplifying the operation steps and improving search efficiency. Intuitive and Easy to Use: Users can directly access and filter any field from the table header, making information retrieval more intuitive and convenient. Visual Stability: Avoids interface jumps caused by expanding and collapsing filter items, enhancing the user's visual experience.

[0032] Furthermore, based on the first aspect, the embedded table query optimization system based on Vue and VxeTable also includes an interface optimization module for optimizing the style of the custom table header filter component and adjusting the properties of the custom table header filter component.

[0033] In some embodiments of the present invention, the style of the header filter component is optimized using CSS and other styling techniques to ensure consistency with the overall style of the table; the size, position, color and other attributes of the filter component are adjusted to ensure that the filter component does not occupy excessive interface space even with a large number of fields; and frequent changes to interface elements are avoided to maintain the stability and aesthetics of the interface.

[0034] In other embodiments of the present invention, comprehensive testing and debugging of the system are also included, including functional testing, performance testing, compatibility testing, etc., to ensure the stability and reliability of the system, and necessary debugging and optimization are performed based on the test results.

[0035] Secondly, embodiments of the present invention provide an embedded table query optimization method based on Vue and VxeTable, applying the embedded table query optimization system based on Vue and VxeTable as described in the first aspect, comprising the following steps: Import the VxeTable component library into the Vue framework and configure dynamic columns; The dynamic column configuration is passed to the Vxetable header component, which automatically generates the corresponding filter items and styles in the header based on the configuration. Each header cell contains filter elements (such as input boxes or drop-down menus), and users can directly enter or select filter conditions in the header.

[0036] The filter criteria input by the user are obtained, and the real-time filtering function is implemented based on a custom header filter component and a backend data server.

[0037] This invention modifies the VxeTable header, embedding the filtering function directly into it, with each header cell possessing filtering capabilities. This design not only saves interface space but also makes filtering operations more intuitive and convenient. Simultaneously, this invention implements a real-time filtering mechanism; when a user inputs or selects filter conditions through the header filter component, the system updates the table data in real time, eliminating the need for the user to click an additional query button. This instant feedback design improves user query efficiency and enhances the user experience. This invention utilizes Vue's event listener mechanism to monitor changes in filter conditions within the custom header filter component, triggering the filtering logic when the conditions change. The filtering logic is written in the parent component or backend data service, updating the table data in real time based on the user-input filter conditions; the filtering logic can include operations such as data filtering and sorting. If data needs to be retrieved from the backend, the API interface of the backend data service can be called to query data that meets the filter conditions. The query results or filtered data are then updated in the table, realizing the real-time filtering function.

[0038] Based on the second aspect, the above method for setting dynamic column configuration further includes the following steps: Add the `selectType` attribute to the dynamic column configuration to specify the type of filter item. `selectType` can be set to date, drop-down list, input field, etc., to meet the filtering needs of different fields.

[0039] like Figure 2 As shown, in a third aspect, embodiments of this application provide an electronic device including a memory 101 for storing one or more programs; and a processor 102. When the one or more programs are executed by the processor 102, they implement the methods described in any of the first aspects above.

[0040] The system also includes a communication interface 103. The memory 101, processor 102, and communication interface 103 are electrically connected directly or indirectly to each other to enable data transmission or interaction. For example, these components can be electrically connected to each other via one or more communication buses or signal lines. The memory 101 can be used to store software programs and modules, and the processor 102 executes various functional applications and data processing by executing the software programs and modules stored in the memory 101. The communication interface 103 can be used for signaling or data communication with other node devices.

[0041] The memory 101 may be, but is not limited to, random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), etc.

[0042] The processor 102 can be an integrated circuit chip with signal processing capabilities. The processor 102 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0043] In the embodiments provided in this application, it should be understood that the disclosed methods and systems can also be implemented in other ways. The method and system embodiments described above are merely illustrative. For example, the flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of methods and systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks may occur in a different order than those marked in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram and / or flowchart, and combinations of blocks in block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.

[0044] In addition, the functional modules in the various embodiments of this application can be integrated together to form an independent part, or each module can exist independently, or two or more modules can be integrated to form an independent part.

[0045] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program thereon. When executed by processor 102, the computer program implements the methods described in any of the first aspects above. If the functions are implemented as software functional modules and sold or used as independent products, they 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 part 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 described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0046] The above are merely preferred embodiments of the present invention and are not intended to limit the present invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

[0047] It will be apparent to those skilled in the art that this application is not limited to the details of the exemplary embodiments described above, and that this application can be implemented in other specific forms without departing from the spirit or essential characteristics of this application. Therefore, the embodiments should be considered illustrative and non-limiting in all respects, and the scope of this application is defined by the appended claims rather than the foregoing description. Thus, all variations falling within the meaning and scope of equivalents of the claims are intended to be included within this application. No reference numerals in the claims should be construed as limiting the scope of the claims.

Claims

1. An embedded table query optimization system based on Vue and VxeTable, characterized in that, This includes the Vue framework, the VxeTable table component, a custom header filtering component, and a backend data server, among which: The Vue framework, as a basic front-end framework, provides features such as data binding and componentization. The VxeTable table component is used to display data tables; A custom header filtering component is embedded in the header of VxeTable to receive user-input filtering conditions and pass them to the backend data server to achieve real-time filtering functionality. The backend data server is used to provide the data required for queries.

2. The embedded table query optimization system based on Vue and VxeTable according to claim 1, characterized in that, The implementation of the real-time filtering function includes: writing filtering logic in the backend data server; when the filtering conditions change, triggering the filtering logic, retrieving data that meets the filtering conditions from the backend data server, and updating the table to implement the real-time filtering function.

3. The embedded table query optimization system based on Vue and VxeTable according to claim 2, characterized in that, The filtering logic includes filtering and sorting operations on the data.

4. The embedded table query optimization system based on Vue and VxeTable according to claim 2, characterized in that, By using Vue's event listener mechanism, we can listen for changes in the filter conditions of the custom header filter component.

5. The embedded table query optimization system based on Vue and VxeTable according to claim 1, characterized in that, It also includes an interface optimization module, which is used to optimize the style of the custom header filter component and adjust the properties of the custom header filter component.

6. A method for optimizing embedded table queries based on Vue and VxeTable, applying the embedded table query optimization system based on Vue and VxeTable as described in any one of claims 1-5, characterized in that, Includes the following steps: Import the VxeTable component library into the Vue framework and configure dynamic columns; The dynamic column configuration is passed to the Vxetable header component, and the Vxetable header component automatically generates the corresponding filter items and styles in the header according to the configuration; The filter criteria input by the user are obtained, and the real-time filtering function is implemented based on a custom header filter component and a backend data server.

7. The embedded table query optimization method based on Vue and VxeTable according to claim 6, characterized in that, The method for setting dynamic column configuration includes the following steps: Add the selectType attribute to the configuration of dynamic columns to specify the type of filter item.

8. An electronic device, characterized in that, include: Memory, used to store one or more programs; processor; When the one or more programs are executed by the processor, the method as described in any one of claims 6-7 is implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the method as described in any one of claims 6-7.

Images