Data query method and system based on table column and search item association configuration
By configuring the association between table columns and search terms, the computed properties of visible columns are recalculated and the table and search form are updated synchronously. This solves the problem of low query efficiency when the number of data fields is large, and enables quick location of key information and efficient data query.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- CSC FINANCIAL CO LTD
- Filing Date
- 2026-04-28
- Publication Date
- 2026-07-21
AI Technical Summary
In existing technologies, the presentation of tables and forms leads to visual information overload and low query efficiency when the number of data fields is large, making it difficult for users to quickly locate key information.
By responding to updates to the internal column configuration array of the target data table, recalculating the computed properties of visible columns, and synchronously updating the data table and search form, the association configuration between table columns and search terms is achieved. Users can then filter the target data table by entering query conditions through custom search terms.
It reduces the burden on users to locate key information among a large number of fields, lowers the probability of misjudgment and duplicate input, and improves the overall efficiency of data query.
Smart Images

Figure CN122432191A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of data processing technology, and in particular to a data query method and system based on the associated configuration of table columns and search items. Background Technology
[0002] In modern web applications, such as enterprise management back-ends and data platforms, it is necessary to display data tables containing numerous fields. Front-end developers need to implement an interface that clearly displays the data and allows for easy filtering and querying. The existing interface mainly consists of a fixed data table displaying all the data, and a query form with multiple fixed input boxes, each corresponding to a column in the data table. After the user enters query criteria in one of the input boxes, the corresponding column in the table refreshes to display the filtered data.
[0003] Currently, existing tables and forms, when dealing with a large number of data fields, display too much information simultaneously. This results in all fields being displayed in the table, requiring users to scroll horizontally for a long time to find the target column, leading to visual information overload. Search forms also display all field input boxes at the same time, requiring users to search through hundreds of search terms one by one, occupying a large amount of screen space and making it difficult for users to quickly locate key information, thus resulting in low data query efficiency. Summary of the Invention
[0004] In view of this, the present invention provides a data query method and system based on the associated configuration of table columns and search items, the main purpose of which is to solve the problem of low query efficiency when querying large amounts of table data through forms.
[0005] According to one aspect of the present invention, a data query method based on the association configuration of table columns and search terms is provided, comprising: In response to an update to the internal column configuration array of the target data table, the visible column computed properties of the target data table are recalculated to obtain the updated visible column computed properties; Based on the updated visible column calculated attributes, the target data table and the search form of the target data table are updated and rendered synchronously to display the target data table with custom display columns and the search form of custom search items; The system obtains the query conditions entered by the user through the search form of the custom search item, and filters the target data table of the custom display column according to the query conditions to display the query results.
[0006] Furthermore, prior to updating the internal column configuration array of the target data table, the method further includes: A reactive internal column configuration array is created by using a reactive reference function. The internal column configuration array includes column metadata attribute information for all columns, and the column metadata attribute information for each column includes at least the field name and visible attributes. Visible column computed properties are created by computed property functions, wherein the visible column computed properties depend on the internal column configuration array and are used to filter columns in the internal column configuration array whose visible property values are true; A reactive form data object is created using reactive object functions, and the key-value pairs of the form data object are initialized with the field names in the internal column configuration array as keys, so that the keys of the form data object correspond one-to-one with the field names in the internal column configuration array.
[0007] Furthermore, the updated visible column computed properties include all columns to be displayed in the internal column configuration array where the visible property value is true; The update and rendering process of the target data table includes: By traversing the updated computed properties of the visible columns using column rendering instructions, a corresponding table column component is generated for each column to be displayed. Bind each attribute in the column metadata definition of the column to be displayed to the table column attribute of the corresponding table column component to obtain the target data table of the custom display column; Specifically, the process of generating a corresponding table column component for any column to be displayed includes: for columns to be displayed with a custom slot attribute value of true, reserving a named slot placeholder, generating a slot name based on the field name of the column to be displayed to allow the parent component to inject a custom rendering method, and generating the table column component of the column to be displayed using the custom rendering method; for columns to be displayed with a custom slot attribute value of true, generating the table column component of the column to be displayed according to the default rendering method.
[0008] Furthermore, the method also includes: In response to a request to add a column, retrieve the column metadata attribute configuration information for the new column; A new column definition object is constructed based on the column metadata attribute configuration information, and the new column definition object is updated to the internal column configuration array; In response to an update to the internal column configuration array of the target data table, the visible column computed properties of the target data table are recalculated, and the column structure is updated.
[0009] Furthermore, the rendering process of the search form for the custom search item includes: By traversing the updated computed properties of the visible columns using column rendering instructions, a corresponding search term is generated for each column to be displayed. Based on the display label attribute of the column metadata of the column to be displayed, placeholder text is generated in the corresponding search term input box.
[0010] Further, the target data table of the custom display column is filtered according to the query conditions to display the query results, including: Update the query condition fields stored in the reactive object based on the query conditions to obtain the updated reactive object; The updated reactive object parameters are passed to the search callback function of the parent component; The parent component filters the data in the target data table of the custom display column based on the query condition fields in the responsive object to obtain the query results.
[0011] Furthermore, the update process of the internal column configuration array includes: Obtain the visibility configuration information of the first column, which is entered by the user through the visibility column configuration interface to configure the visibility attribute of at least one column in the target data table, and update the internal column configuration array based on the visibility configuration information of the first column; or, Obtain the target business type selected by the user through the visible column configuration interface, retrieve the second column visibility configuration information matching the target business type from the preset business visible column mapping relationship set, and update the internal column configuration array based on the second column visibility configuration information.
[0012] According to another aspect of the present invention, a data query system based on the association configuration of table columns and search items is provided, comprising: The recalculation module is used to recalculate the visible column calculated attributes of the target data table in response to an update of the internal column configuration array of the target data table, so as to obtain the updated visible column calculated attributes. The synchronous update rendering module is used to synchronously update and render the target data table and the search form of the target data table based on the updated visible column calculated attributes, so as to display the target data table with custom display columns and the search form of custom search items. The query module is used to obtain the query conditions entered by the user through the search form of the custom search item, and filter the target data table of the custom display column according to the query conditions to display the query results.
[0013] According to another aspect of the present invention, a storage medium is provided, wherein at least one executable instruction is stored therein, the executable instruction causing a processor to perform operations corresponding to the data query method described above based on the association configuration of table columns and search items.
[0014] According to another aspect of the present invention, a terminal is provided, comprising: a processor, a memory, a communication interface, and a communication bus, wherein the processor, the memory, and the communication interface communicate with each other through the communication bus; The memory is used to store at least one executable instruction, which causes the processor to perform the operation corresponding to the data query method based on the association configuration of table columns and search items described above.
[0015] By employing the above-described technical solutions, the technical solutions provided by the embodiments of the present invention have at least the following advantages: This invention provides a data query method and system based on the associated configuration of table columns and search items. In this embodiment, in response to an update of the internal column configuration array of the target data table, the visible column calculated attributes of the target data table are recalculated to obtain updated visible column calculated attributes. Based on the updated visible column calculated attributes, the target data table and its search form are synchronously updated and rendered to display the target data table with custom display columns and the search form with custom search items. The query conditions input by the user through the search form with custom search items are obtained, and the target data table with custom display columns is filtered based on these query conditions to display the query results. This significantly reduces the user's workload in locating key information among numerous fields, lowers the probability of misjudgments and duplicate inputs caused by redundancy in table and search form fields, and ensures that the table display columns and search form search items remain strictly synchronized, thereby improving the overall efficiency of data querying.
[0016] The above description is merely an overview of the technical solution of the present invention. In order to better understand the technical means of the present invention, it can be implemented according to the contents of the specification. Furthermore, in order to make the above and other objects, features and advantages of the present invention more apparent and understandable, specific embodiments of the present invention are described below. Attached Figure Description
[0017] Various other advantages and benefits will become apparent to those skilled in the art upon reading the following detailed description of preferred embodiments. The accompanying drawings are for illustrative purposes only and are not intended to limit the invention. Furthermore, the same reference numerals denote the same parts throughout the drawings. In the drawings: Figure 1 This diagram illustrates a data query method based on the association configuration of table columns and search items provided by an embodiment of the present invention. Figure 2 This invention provides a flowchart of a responsive data structure creation method for driving the linked rendering of tables and search forms, according to an embodiment of the present invention. Figure 3This diagram illustrates a data query system based on the association configuration of table columns and search items, according to an embodiment of the present invention. Figure 4 A schematic diagram of the structure of a terminal provided in an embodiment of the present invention is shown. Detailed Implementation
[0018] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
[0019] To address the issue of low query efficiency when retrieving large amounts of tabular data via forms, this invention provides a data query method based on the associated configuration of table columns and search terms. This method is implemented through a data query system capable of configuring the association between table columns and search terms. This system includes a user interface for receiving user configuration operations on visible columns of the data table; and a data linkage hub built using a reactive data structure created based on Vue3's Composition API. This hub is used to associate visible columns in the data table with search terms in the search form, enabling synchronous updates of visible columns in the data table and search terms displayed in the search form with a single user configuration. When the data table contains a large number of columns, the search form also displays a large number of search terms, which is inconvenient for users to query using search terms. In this case, the user configures the visibility of columns in the internal column configuration array through the user interface. Through the association of this data linkage hub, the visible columns in the data table and the search terms in the search form are updated synchronously. Users no longer need to perform separate operations and configurations on the data table and search form to achieve linked filtering, thereby greatly improving the efficiency of subsequent data queries.
[0020] like Figure 1 As shown, the method includes: 101. In response to an update of the internal column configuration array of the target data table, recalculate the visible column computed properties of the target data table to obtain the updated visible column computed properties.
[0021] In this embodiment of the invention, the target data table is the data table for which a query operation is currently required. The internal column configuration array includes metadata objects for each column in the target data table. These metadata objects include all possible fields, such as field name, visibility attributes, column width, alignment, etc. Updates to the internal column configuration array can be triggered by user actions on different interactive interfaces. For example, if a user clicks the column configuration button above the table and checks or dechecks a column in the pop-up list, the visibility attributes of the corresponding column in the internal column configuration array will change accordingly. After the system detects this update, the data linkage hub recalculates the calculated attributes of the visible columns using the calculated attribute function.
[0022] 102. Based on the updated visible column calculated attributes, synchronously update and render the target data table and the search form of the target data table to display the target data table with custom display columns and the search form of custom search items.
[0023] In this embodiment of the invention, the data table and the search form share the same array of visible columns. This means that the computed attributes of the visible columns are referenced by both the data table and the search form simultaneously. These computed attributes act as the central link between the data table and the search form; when they are recalculated and updated, they synchronously drive the updates of the visible columns in the data table and the search items in the search form. The two maintain real-time synchronization in terms of rendered content and structure, achieving configuration in one place and effect in two places. Through this step, users obtain a simplified table displaying only the fields of interest and a simplified search form containing only the corresponding search conditions, effectively solving the problem of bloated interfaces caused by too many fields.
[0024] 103. Obtain the query conditions entered by the user through the search form of the custom search item, and filter the target data table of the custom display column according to the query conditions to display the query results.
[0025] In this embodiment of the invention, the search form for custom search terms is a simplified search form used to input query conditions. The system captures the user's input in real time and stores it in the corresponding field of the form data object. When the user clicks the search button or triggers a form submission event, the system reads all the query conditions stored in the form data object, assembles them into query parameters, and sends a data query request to the server. The server filters the original data based on the received query conditions and returns a dataset that meets the conditions. After receiving the returned data, the system updates the data source of the table component. Since the table component currently only displays the user-defined visible columns, the query results are presented only in a simplified table format, allowing users to quickly locate target information without repeatedly searching through multiple columns. By linking the search form and the table, the operation path for users to fill in query conditions and browse results is significantly shortened, thereby improving data query efficiency.
[0026] In one embodiment of the present invention, for further illustration and limitation, such as Figure 2 As shown, prior to updating the internal column configuration array of the target data table, the method further includes: 201. Create a reactive internal column configuration array using reactive reference functions.
[0027] 202. Create a visible column computed property using computed property functions.
[0028] 203. Create a reactive form data object using reactive object functions, and initialize the key-value pairs of the form data object with the field names in the internal column configuration array as keys.
[0029] In this embodiment of the invention, to achieve the association between the data table and the search form, a reactive data structure is pre-built based on Vue3's Composition API to drive the linked rendering of the table and the search form. Specifically, this includes: creating an internal column configuration array using the reactive reference function 'ref', which stores the metadata attribute information of all columns. The metadata attribute information of each column includes at least the field name and a visible attribute. Furthermore, a visible column computed property is created using the computed property function 'computed'. This visible column computed property depends on the internal column configuration array and is used to filter columns in the internal column configuration array whose visible attribute values are true, serving as the common rendering data source for both the table component and the search form component. In addition, a form data object is created using the reactive object function 'reactive', and the key-value pair structure of the form data object is initialized with the field names in the internal column configuration array as keys, ensuring a one-to-one correspondence between the keys of the form data object and the field names in the internal column configuration array, used to store the query conditions entered by the user in the search form.
[0030] For example, in an employee information management system, a table might have 50 columns of data: name, salary, department, place of origin, ID number, housing provident fund account, etc. The created internal column configuration array would be represented as: [{field name: "name", display label: "name", visible attribute: true}, {field name: "salary", display label: "salary", visible attribute: false}, {field name: "dept", display label: "department", visible attribute: true}, {field name: "hometown", display label: "place of origin", visible attribute: false}, ... a total of 50 columns].
[0031] Furthermore, create a computed property for the visible column, with the rule that only columns with "visibility attribute = true" are retrieved. The calculated result is: Visibility column computed property = [{field name: "name", display label: "Name", visibility attribute: true}, {field name: "dept", display label: "Department", visibility attribute: true}].
[0032] Finally, a form data object is created to store the query conditions. The form data object contains 50 keys: {name:"", / / corresponding to the "Name" column; salary:"", / / corresponding to the "Salary" column; dept:"", / / corresponding to the "Department" column; hometown:"" / / corresponding to the "Place of Origin" column...}. The table determines which data columns to display based on this calculated attribute, and the search form also determines which search terms to generate based on this calculated attribute. Both share the same form data object with field names as keys to pass query conditions, ensuring that the search form provides the same filter boxes as the table displays, and that their configurations and content are always synchronized. Through the construction of this responsive data structure, the dependency relationship between the visible column calculated attributes and the internal column configuration array, as well as the mapping relationship between the form data object and the field names of the internal column configuration array, are established. This provides technical support for automatically triggering linked updates of the table and form when subsequent column configurations change.
[0033] It should be noted that column metadata attributes include not only field names and visible attributes, but also search attributes, display labels, column width, whether sorting is supported, fixed column position, alignment, whether to display overflow warnings, formatting functions, and custom slots.
[0034] In one embodiment of the present invention, for further explanation and limitation, the update rendering process of the target data table includes: By traversing the updated computed properties of the visible columns using column rendering instructions, a corresponding table column component is generated for each column to be displayed. Bind each attribute in the column metadata definition of the column to be displayed to the table column attribute of the corresponding table column component to obtain the target data table of the custom display column.
[0035] In this embodiment of the invention, after the visible column computed property is recalculated, it internally contains all columns whose "visibility attribute" value is true in the internal column configuration array. For example, if the original configuration has three columns: "Name," "Salary," and "Department," and the user sets the visibility attribute of the "Salary" column to false, the updated visible column computed property will only contain the two columns to be displayed: "Name" and "Department." During the update and rendering process of the target data table, the system first iterates through the updated visible column computed property using the column rendering instruction 'v-for', dynamically generating a corresponding table column component for each column to be displayed. Each generated table column component reads various attributes from the corresponding column metadata definition, such as binding the "field name" to the component's prop attribute, binding the "display label" to the label attribute, and binding the "column width" to the width attribute, thereby completing the attribute binding and displaying the target data table containing only the user-selected visible columns.
[0036] During the generation of a single table column component, the system further checks the custom slot attribute value of the column to be displayed. If the custom slot attribute value of a column to be displayed, such as the "avatar" column, is true, the system will reserve a named slot placeholder in the generated table column component and generate a corresponding slot name, such as slot="column_avatar", based on the column's field name, such as "avatar", so that the parent component can subsequently inject custom rendering content, such as an image preview component. If the parent component provides a custom rendering method for the slot, the system will render the column according to the custom method; otherwise, it will fall back to the default rendering method.
[0037] In one embodiment of the present invention, for further explanation and limitation, the method further includes: In response to a request to add a column, retrieve the column metadata attribute configuration information for the new column; A new column definition object is constructed based on the column metadata attribute configuration information, and the new column definition object is updated to the internal column configuration array; In response to an update to the internal column configuration array of the target data table, the visible column computed properties of the target data table are recalculated, and the column structure is updated.
[0038] In this embodiment of the invention, the system provides a pop-up window for adding a new column, supporting the dynamic addition of custom columns at runtime. Users input configuration information in the pop-up window, including column metadata attributes, column type, and calculation formula. Column types include ordinary field columns and calculation formula columns. The newly added column is automatically added to the internal column configuration array. Since the internal column configuration array is responsive, the addition operation is equivalent to triggering an update of the internal column configuration array, thereby executing steps 101 and 102. Specifically, when a user initiates a request to add a column through a front-end interface such as the "Add Column" pop-up window, the system first responds to the request, obtains the column metadata attribute configuration information of the new column entered by the user, constructs a new column based on this configuration information, and defines this column and its metadata attribute configuration information as an object, namely, the new column definition object. The format of this new column definition object is completely consistent with the format of existing column definition objects in the internal column configuration array. The system adds the new column definition object to the internal column configuration array through an array update method. The above process does not require users to manually refresh the page, nor does it require developers to write additional update code; it is entirely completed automatically by the responsive system.
[0039] In one embodiment of the present invention, for further explanation and limitation, the rendering process of the search form for custom search items includes: By traversing the updated computed properties of the visible columns using column rendering instructions, a corresponding search term is generated for each column to be displayed. Based on the display label attribute of the column metadata of the column to be displayed, placeholder text is generated in the corresponding search term input box.
[0040] In this embodiment of the invention, the search form rendering process for custom search items shares the same data source and linkage mechanism as the column rendering process of the table. After the calculated attributes of the visible columns are recalculated and an updated array of visible columns is output, the search form component iterates through the array of visible columns using the column rendering instruction 'v-for', generating corresponding search items for each column to be displayed. For example, if the updated calculated attributes of the visible columns include three columns to be displayed: "Name," "Department," and "Salary," the search form will generate corresponding input boxes or dropdown selectors for these three columns in sequence. When generating each search item, the display label attribute in the column metadata of the column to be displayed is read, and the placeholder text for the input box is automatically generated based on this attribute. For example, for a column to be displayed with the field name "name" and the display label "Name," an input box with the placeholder "Please enter your name" is generated.
[0041] It's important to note that column attributes can also include search attributes. These attributes control whether a column is used as a search term in the form. In other words, the final display result of a search term must satisfy both the column's visibility attribute and the search attribute. Therefore, when a column has a search attribute, the component for that search term will only be generated in the search form if both the column's visibility attribute and search attribute are true. If a column's visibility attribute is true but its corresponding search attribute is false, the component for that column's search term will not be generated. This dual-attribute control allows for flexible configuration of search term display.
[0042] In one embodiment of the present invention, for further explanation and limitation, the target data table of the custom display column is filtered according to the query conditions to display the query results, including: Update the query condition fields stored in the reactive object based on the query conditions to obtain the updated reactive object; The updated reactive object parameters are passed to the search callback function of the parent component; The parent component filters the data in the target data table of the custom display column based on the query condition fields in the responsive object to obtain the query results.
[0043] In this embodiment of the invention, after the user enters query conditions in each search item, the system updates the values of the corresponding fields in the responsive form data object in real time through a two-way binding mechanism, resulting in an updated responsive object containing complete query conditions. This object is passed as a parameter to the search callback function of the parent component, which then filters the current table data source based on the field values and returns a result set that meets the conditions. In this process, the same field mapping as the column configuration-linked rendering is used to directly drive the data query, avoiding secondary mapping or redundant configuration between query conditions and table fields. This couples the two stages of the user selecting visible columns as needed and accurately filtering based on the conditions corresponding to the visible columns, reducing the cost of the query operation path.
[0044] In one embodiment of the present invention, for further explanation and limitation, the update process of the internal column configuration array includes: Obtain the visibility configuration information of the first column, which is entered by the user through the visibility column configuration interface to configure the visibility attribute of at least one column in the target data table, and update the internal column configuration array based on the visibility configuration information of the first column; or, Obtain the target business type selected by the user through the visible column configuration interface, retrieve the second column visibility configuration information matching the target business type from the preset business visible column mapping relationship set, and update the internal column configuration array based on the second column visibility configuration information.
[0045] In this embodiment of the invention, the internal column configuration array can be updated through two methods: manual user configuration and automatic configuration based on business type. Users can trigger updates via a UI configuration operation. For example, a drop-down menu component in the configuration interface displays a list of checkboxes for all current columns, each checkbox corresponding to the visibility attribute of a column. By checking or unchecking any checkbox, users input the visibility attribute configuration information for at least one column in the target data table, thus updating the internal column configuration array. Users can also trigger updates based on system business templates. For example, the system has a preset set of business visibility column mapping relationships, which records the column visibility configuration information corresponding to different business types such as "Recruitment," "Salary Adjustment," "Initial Review," and "Final Review." When a user selects a target business type through the column configuration interface, such as selecting "Recruitment" from the drop-down menu, the system, upon receiving this selection, retrieves the visibility configuration information of the second column matching the target business type from the preset set of business visibility column mapping relationships. This determines which columns should be visible and which should be invisible under this business type, thereby updating the internal column configuration array.
[0046] It's important to note that regardless of the method used to update the internal column configuration array, it will trigger the automatic recalculation of the visible column computed properties, thereby driving a synchronized update of the dynamic table and dynamic form interfaces. Furthermore, when a user executes a query using the search and filter functions, the system will filter the data based on the search criteria corresponding to the currently visible columns and automatically reset the page number to the first page, ensuring the correct display of the query results. If a user manually adjusts the visibility of individual columns after automatically configuring the business type, it will also respond in real time, thus supporting automated batch configuration while retaining the flexibility for personalized adjustments by the user.
[0047] This invention provides a data query method based on the associated configuration of table columns and search terms. In this embodiment, in response to an update of the internal column configuration array of the target data table, the visible column calculated attributes of the target data table are recalculated to obtain updated visible column calculated attributes. Based on the updated visible column calculated attributes, the target data table and its search form are synchronously updated and rendered to display the target data table with custom display columns and the search form with custom search terms. The query conditions input by the user through the search form with custom search terms are obtained, and the target data table with custom display columns is filtered based on these query conditions to display the query results. This significantly reduces the user's workload in locating key information among numerous fields, lowers the probability of misjudgments and duplicate inputs caused by redundancy in table and search form fields, and ensures that the table display columns and search form search terms remain strictly synchronized, thereby improving the overall efficiency of data querying.
[0048] Furthermore, as a response to the above Figure 1The implementation of the method shown in this embodiment of the invention provides a data query system based on the associated configuration of table columns and search items, such as... Figure 3 As shown, the system includes: The recalculation module 31 is used to recalculate the visible column calculated attributes of the target data table in response to an update of the internal column configuration array of the target data table, so as to obtain the updated visible column calculated attributes. The synchronous update rendering module 32 is used to synchronously update and render the target data table and the search form of the target data table according to the updated visible column calculation attributes, so as to display the target data table with custom display columns and the search form of custom search items. The query module 33 is used to obtain the query conditions entered by the user through the search form of the custom search item, and filter the target data table of the custom display column according to the query conditions to display the query results.
[0049] Furthermore, the system also includes: The first creation module is used to create a reactive internal column configuration array through a reactive reference function, wherein the internal column configuration array includes column metadata attribute information of all columns, and the column metadata attribute information of each column includes at least the field name and visible attributes; The second creation module is used to create a visible column computed attribute through a computed attribute function, wherein the visible column computed attribute depends on the internal column configuration array and is used to filter out columns in the internal column configuration array whose visible attribute values are true; The third creation module is used to create a reactive form data object through a reactive object function, and initialize the key-value pairs of the form data object with the field names in the internal column configuration array as keys, so that the keys of the form data object correspond one-to-one with the field names in the internal column configuration array.
[0050] Furthermore, the updated visible column computed attribute includes all columns to be displayed in the internal column configuration array whose visible attribute value is true; The synchronous update rendering module 32 includes: The first generation unit is used to traverse the updated visible column computed properties through column rendering instructions and generate a corresponding table column component for each column to be displayed. A binding unit is used to bind each attribute in the column metadata definition of the column to be displayed to the table column attribute of the corresponding table column component, thereby obtaining the target data table of the custom display column. Specifically, the process of generating a corresponding table column component for any column to be displayed includes: for columns to be displayed with a custom slot attribute value of true, reserving a named slot placeholder and generating a slot name based on the field name of the column to be displayed, allowing the parent component to inject a custom rendering method, and generating the table column component of the column to be displayed using the custom rendering method; for columns to be displayed with a custom slot attribute value of true, generating the table column component of the column to be displayed according to the default rendering method.
[0051] Furthermore, the synchronous update rendering module 32 also includes: The retrieval unit is used to respond to a request to add a column and retrieve the column metadata attribute configuration information of the new column; A construction unit is used to construct a new column definition object based on the column metadata attribute configuration information, and update the new column definition object to the internal column configuration array; The recalculation unit is used to recalculate the visible column computed properties of the target data table and update the column structure in response to an update of the internal column configuration array of the target data table.
[0052] Furthermore, the synchronous update rendering module 32 also includes: The second generation unit is used to traverse the updated visible column calculated attributes through column rendering instructions and generate corresponding search terms for each column to be displayed. The third generation unit is used to generate placeholder text in the corresponding search term input box based on the display label attribute of the column metadata of the column to be displayed.
[0053] Furthermore, the query module 33 includes: The update unit is used to update the query condition fields stored in the reactive object based on the query conditions, and obtain the updated reactive object. The passing unit is used to pass the updated reactive object parameters to the search callback function of the parent component; The filtering unit is used by the parent component to filter the data in the target data table of the custom display column based on the query condition fields in the responsive object, and obtain the query results.
[0054] Furthermore, the system also includes: The first configuration module is used to obtain first column visibility configuration information, which is input by the user through the visible column configuration interface, to configure the visibility attribute of at least one column in the target data table, and to update the internal column configuration array based on the first column visibility configuration information; or, The second configuration module is used to obtain the target business type selected by the user through the visible column configuration interface, retrieve the second column visibility configuration information that matches the target business type from the preset business visible column mapping relationship set, and update the internal column configuration array according to the second column visibility configuration information.
[0055] This invention provides a data query system based on the associated configuration of table columns and search terms. In this embodiment, in response to an update of the internal column configuration array of the target data table, the system recalculates the visible column calculated attributes of the target data table to obtain updated visible column calculated attributes. Based on these updated visible column calculated attributes, the system synchronously updates and renders the target data table and its search form to display the target data table with custom display columns and the search form with custom search terms. The system obtains the query conditions entered by the user through the search form with the custom search terms and filters the target data table with the custom display columns based on these conditions to display the query results. This significantly reduces the user's workload in locating key information among numerous fields, lowers the probability of misjudgments and duplicate inputs caused by redundancy in table and search form fields, and ensures that the table display columns and search form search terms remain strictly synchronized, thereby improving the overall efficiency of data querying.
[0056] According to one embodiment of the present invention, a storage medium is provided, the storage medium storing at least one executable instruction, the computer-executable instruction being capable of executing the data query method based on the association configuration of table columns and search items in any of the above method embodiments.
[0057] Figure 4 The diagram shows a structural schematic of a terminal according to an embodiment of the present invention. The specific implementation of the present invention is not limited to the specific implementation of the terminal.
[0058] like Figure 4 As shown, the terminal may include: a processor 402, a communication interface 404, a memory 406, and a communication bus 408.
[0059] The processor 402, communication interface 404, and memory 406 communicate with each other via communication bus 408.
[0060] Communication interface 404 is used for network communication with other devices such as clients or other servers.
[0061] The processor 402 is used to execute program 410, specifically to execute the relevant steps in the above-described data query method embodiment based on the association configuration of table columns and search items.
[0062] Specifically, program 410 may include program code that includes computer operation instructions.
[0063] Processor 402 may be a central processing unit (CPU), a specific integrated circuit (ASIC), or one or more integrated circuits configured to implement embodiments of the present invention. The terminal may include one or more processors of the same type, such as one or more CPUs; or it may include processors of different types, such as one or more CPUs and one or more ASICs.
[0064] Memory 406 is used to store program 410. Memory 406 may include high-speed RAM memory, and may also include non-volatile memory, such as at least one disk storage device.
[0065] Specifically, program 410 can be used to cause processor 402 to perform the following operations: In response to an update to the internal column configuration array of the target data table, the visible column computed properties of the target data table are recalculated to obtain the updated visible column computed properties; Based on the updated visible column calculated attributes, the target data table and the search form of the target data table are updated and rendered synchronously to display the target data table with custom display columns and the search form of custom search items; The system obtains the query conditions entered by the user through the search form of the custom search item, and filters the target data table of the custom display column according to the query conditions to display the query results.
[0066] It is obvious to those skilled in the art that the modules or steps of the present invention described above can be implemented using general-purpose computing systems. They can be centralized on a single computing system or distributed across a network of multiple computing systems. Optionally, they can be implemented using program code executable by a computing system, thereby storing them in a storage system for execution by the computing system. In some cases, the steps shown or described can be performed in a different order than those presented herein, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular combination of hardware and software.
[0067] The above description is merely a preferred embodiment of the present invention and is not intended to limit the 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.
Claims
1. A data query method based on the association configuration of table columns and search terms, characterized in that, include: In response to an update to the internal column configuration array of the target data table, the visible column computed properties of the target data table are recalculated to obtain the updated visible column computed properties; Based on the updated visible column calculated attributes, the target data table and the search form of the target data table are updated and rendered synchronously to display the target data table with custom display columns and the search form of custom search items; The system obtains the query conditions entered by the user through the search form of the custom search item, and filters the target data table of the custom display column according to the query conditions to display the query results.
2. The method according to claim 1, characterized in that, Prior to updating the internal column configuration array of the target data table, the method further includes: A reactive internal column configuration array is created by using a reactive reference function. The internal column configuration array includes column metadata attribute information for all columns, and the column metadata attribute information for each column includes at least the field name and visible attributes. Visible column computed properties are created by computed property functions, wherein the visible column computed properties depend on the internal column configuration array and are used to filter columns in the internal column configuration array whose visible property values are true; A reactive form data object is created using reactive object functions, and the key-value pairs of the form data object are initialized with the field names in the internal column configuration array as keys, so that the keys of the form data object correspond one-to-one with the field names in the internal column configuration array.
3. The method according to claim 1, characterized in that, The updated visible column computed attribute includes all columns to be displayed in the internal column configuration array whose visible attribute value is true. The update and rendering process of the target data table includes: By traversing the updated computed properties of the visible columns using column rendering instructions, a corresponding table column component is generated for each column to be displayed. Bind each attribute in the column metadata definition of the column to be displayed to the table column attribute of the corresponding table column component to obtain the target data table of the custom display column; Specifically, the process of generating a corresponding table column component for any column to be displayed includes: for columns to be displayed with a custom slot attribute value of true, reserving a named slot placeholder, generating a slot name based on the field name of the column to be displayed to allow the parent component to inject a custom rendering method, and generating the table column component of the column to be displayed using the custom rendering method; for columns to be displayed with a custom slot attribute value of true, generating the table column component of the column to be displayed according to the default rendering method.
4. The method according to claim 3, characterized in that, The method further includes: In response to a request to add a column, retrieve the column metadata attribute configuration information for the new column; A new column definition object is constructed based on the column metadata attribute configuration information, and the new column definition object is updated to the internal column configuration array; In response to an update to the internal column configuration array of the target data table, the visible column computed properties of the target data table are recalculated, and the column structure is updated.
5. The method according to claim 1, characterized in that, The rendering process of the search form for the custom search item includes: By traversing the updated computed properties of the visible columns using column rendering instructions, a corresponding search term is generated for each column to be displayed. Based on the display label attribute of the column metadata of the column to be displayed, placeholder text is generated in the corresponding search term input box.
6. The method according to claim 1, characterized in that, The target data table is filtered according to the query conditions to display the query results, including: Update the query condition fields stored in the reactive object based on the query conditions to obtain the updated reactive object; The updated reactive object parameters are passed to the search callback function of the parent component; The parent component filters the data in the target data table of the custom display column based on the query condition fields in the responsive object to obtain the query results.
7. The method according to claim 1, characterized in that, The update process of the internal column configuration array includes: Obtain the visibility configuration information of the first column, which is entered by the user through the visibility column configuration interface to configure the visibility attribute of at least one column in the target data table, and update the internal column configuration array based on the visibility configuration information of the first column; or, Obtain the target business type selected by the user through the visible column configuration interface, retrieve the second column visibility configuration information matching the target business type from the preset business visible column mapping relationship set, and update the internal column configuration array based on the second column visibility configuration information.
8. A data query system based on the associated configuration of table columns and search terms, characterized in that, include: The recalculation module is used to recalculate the visible column calculated attributes of the target data table in response to an update of the internal column configuration array of the target data table, so as to obtain the updated visible column calculated attributes. The synchronous update rendering module is used to synchronously update and render the target data table and the search form of the target data table based on the updated visible column calculated attributes, so as to display the target data table with custom display columns and the search form of custom search items. The query module is used to obtain the query conditions entered by the user through the search form of the custom search item, and filter the target data table of the custom display column according to the query conditions to display the query results.
9. A storage medium, characterized in that, The storage medium stores at least one executable instruction that causes the processor to perform the operation corresponding to the data query method based on the association configuration of table columns and search items as described in any one of claims 1-7.
10. A terminal, characterized in that, include: The processor, memory, communication interface, and communication bus are provided, wherein the processor, memory, and communication interface communicate with each other via the communication bus. The memory is used to store at least one executable instruction that causes the processor to perform the operation corresponding to the data query method based on the association configuration of table columns and search items as described in any one of claims 1-7.