Method and system for displaying complex header into virtual table

Abstract

The invention relates to the field of Web application development, and particularly provides a method and a system for displaying a complex header into a virtual table, which are based on a machine account, the conversion from the complex header to the header of the virtual table is involved in the filling process, the virtual table adopts a vue + elementui display mode, the header of an Element-ui table needs to be clear, and then the data of the whole table is circularly displayed. Compared with the prior art, the method has the advantages that the inaccuracy of manual copying and pasting operation can be avoided, the copying difficulty when the row number of the source data table is too large is reduced, and the-gt is directly dragged; selecting a column-gt to be matched; and the target machine account filled with the data can be checked by clicking the determination, so that the data filling operation is simpler and more scientific, and the working efficiency is greatly improved.

Description

Technical Field

[0001] The invention relates to the field of Web application development, and specifically provides a method and system for displaying a complex table header as a virtual table. Background Art

[0002] In the ledger system, it is necessary to set a header identifier for Excel in order to perform data verification. Sometimes it is necessary to fill the data in the table by dragging the data. It is difficult to achieve the dragging effect from the original Excel. At this time, the source data ledger needs to be temporarily converted into the form of a front-end page table to facilitate the dragging effect. Here we call the ledger that needs to be filled with data the target ledger, and the originally set built-in ledger is the metadata ledger. When filling the data, the source data ledger needs to be converted into a front-end table. The header with rules set in the source data ledger is not necessarily a first-level header, and there may also be multi-level complex headers. How to solve the above technical problems is an urgent problem to be solved by technical personnel in this field. Summary of the invention

[0003] The present invention aims at the above-mentioned deficiencies of the prior art and provides a method for displaying a complex table header as a virtual table with strong practicality.

[0004] A further technical task of the present invention is to provide a system for displaying complex table headers as virtual tables that is rationally designed, safe and applicable.

[0005] The technical solution adopted by the present invention to solve its technical problem is:

[0006] A method for displaying complex headers as virtual tables, based on ledgers. The filling process involves the conversion of complex headers to virtual table headers. The virtual table uses the display method of vue+elementui. The table of Element-ui needs to clearly define the header, and then loop to display the entire table data.

[0007] Furthermore, after looping and displaying the entire table data, it is easy to display the single-row header, and the multi-level header is processed as follows:

[0008] First, create a MyTable component, in which el-table-column is replaced by the MyColumn component. MyColumn is an ordinary el-table-column component. The child element needs to determine whether there are children in the table header data obtained. If so, the MyColumn component needs to be recursively called. In this way, as long as it complies with the ledger business rules, it can be displayed.

[0009] Further, the specific steps include the following:

[0010] S1. Get table data;

[0011] S2. Create a table column component MyColumn and add a drag event to a specific column;

[0012] S3. Create a multi-level header table component MyTable, and replace the internal column component with MyColumn;

[0013] S4. Enter the header data and table content data, display the table, and drag a column to view the effect.

[0014] Furthermore, in step S1, the table data includes whether it is a multi-level header, as well as the header data and data structure - list nested children in a tree-like structure. The most detailed first-level header should be unique, and there should be no merge of multiple columns.

[0015] A system that displays complex table headers as virtual tables. It is based on ledgers and involves the conversion of complex table headers to virtual table headers during the filling process. The virtual table uses vue+elementui display method. The Element-ui table must have a clear header and then loop to display the entire table data.

[0016] Furthermore, after looping and displaying the entire table data, it is easy to display the single-row header, and the multi-level header is processed as follows:

[0017] First, create a MyTable component, in which el-table-column is replaced by the MyColumn component. MyColumn is an ordinary el-table-column component. The child element needs to determine whether there are children in the table header data obtained. If so, the MyColumn component needs to be recursively called. In this way, as long as it complies with the ledger business rules, it can be displayed.

[0018] Further, the specific steps include the following:

[0019] S1. Get table data;

[0020] S2. Create a table column component MyColumn and add a drag event to a specific column;

[0021] S3. Create a multi-level header table component MyTable, and replace the internal column component with MyColumn;

[0022] S4. Enter the header data and table content data, display the table, and drag a column to view the effect.

[0023] Furthermore, in step S1, the table data includes whether it is a multi-level header, as well as the header data and data structure - list nested children in a tree-like structure. The most detailed first-level header should be unique, and there should be no merge of multiple columns.

[0024] Compared with the prior art, the method and system for displaying a complex table header as a virtual table of the present invention has the following outstanding beneficial effects:

[0025] The present invention avoids the inaccuracy of manual copy and paste operations, reduces the difficulty of copying when the number of rows in the source data table is too large, and directly drags -> selects the column to be matched -> clicks OK to view that the target ledger has been filled with data, making the data filling operation simpler and more scientific, greatly improving work efficiency. DETAILED DESCRIPTION

[0026] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention is further described in detail below in conjunction with specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0027] A best embodiment is given below:

[0028] In this embodiment, a method for displaying a complex header as a virtual table is based on a ledger, has a header rule of the ledger, built-in data, and drags to match and accurately fill, which simplifies the operation while improving the accuracy of data filling. Based on this requirement, the conversion of complex headers to virtual table headers is involved in the filling process. The virtual table adopts the display method of vue+elementui.

[0029] The table of Element-ui needs to have a clear header before the entire table data can be displayed in a loop. It is easy to display when there is a single-row header, but it needs to be processed when there are multiple levels of headers.

[0030] First, create a MyTable component, which is a regular el-table usage, but el-table-column needs to be replaced with its own component MyColumn. MyColumn is a common el-table-column component, but the child element needs to determine whether there are children in the table header data obtained. If there are children, it needs to recursively call itself, that is, the MyColumn component. In this way, no matter how complex the multi-level header is, as long as it complies with the ledger business rules, it can be displayed.

[0031] The specific steps include the following:

[0032] S1. Get table data;

[0033] The table data includes whether it is a multi-level header, as well as the header data and data structure - the form of a tree structure similar to list nested children. The most detailed level of header should be unique, and there should be no merge of multiple columns;

[0034] S2. Create a table column component MyColumn and add a drag event to a specific column;

[0035] S3. Create a multi-level header table component MyTable, and replace the internal column component with MyColumn;

[0036] S4. Enter the header data and table content data, display the table, and drag a column to view the effect.

[0037] The ledgers with various complex headers are displayed correctly. The data columns can be dragged. After matching the rules, the source data ledger can be correctly filled in the target ledger to obtain an ideal target ledger filled with data;

[0038] The target ledger can be filled with the complete source data ledger, with no missing rows or numbers. There must be certain rules for matching, and after matching, the data can be directly filled into the target ledger.

[0039] The one-to-one correspondence between the columns of the target ledger and the source data ledger requires precise setting of the corresponding relationship between the ledgers. The method of dragging a column in the source data ledger to match the target data and setting the corresponding relationship of other columns is adopted to obtain data for filling.

[0040] The source data ledger columns can be freely dragged. It is troublesome to drag in Excel, but it is easier to operate after converting to the front-end table mode. Whether the header of the source data ledger is an easy-to-display first-level header or a more complex and difficult-to-display multi-level header, as long as it is a tree structure similar to list nested children, it can be displayed correctly and any column can be dragged.

[0041] Based on the above method, a system in this embodiment displays a complex header as a virtual table. Based on the ledger, the filling process involves the conversion of complex headers to virtual table headers. The virtual table uses the display method of vue+elementui. The Element-ui table must clearly define the header and then loop to display the entire table data.

[0042] Among them, after the entire table data is displayed in a loop, the single-row header is easy to display, and the multi-level header is processed as follows:

[0043] First, create a MyTable component, in which el-table-column is replaced by the MyColumn component. MyColumn is an ordinary el-table-column component. The child element needs to determine whether there are children in the table header data obtained. If so, the MyColumn component needs to be recursively called. In this way, as long as it complies with the ledger business rules, it can be displayed.

[0044] The specific steps include the following:

[0045] S1. Get table data;

[0046] S2. Create a table column component MyColumn and add a drag event to a specific column;

[0047] S3. Create a multi-level header table component MyTable, and replace the internal column component with MyColumn;

[0048] S4. Enter the header data and table content data, display the table, and drag a column to view the effect.

[0049] In step S1, the table data includes whether it is a multi-level header, as well as the header data and data structure - list nested children in a tree-like structure. The most detailed first-level header should be unique and there should be no merge of multiple columns.

[0050] The above-mentioned specific implementations are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above-mentioned specific implementations. Any technical solutions that conform to the above-mentioned specific implementations of the present invention and any appropriate changes or substitutions made by ordinary technicians in the relevant technical field shall fall within the patent protection scope of the present invention.

[0051] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for displaying a complex table header as a virtual table, characterized in that: Based on the ledger, the filling process involves the conversion of complex table headers to virtual table headers. The virtual table uses vue+elementui display method. The Element-ui table must clarify the header and then loop to display the entire table data.

2. A method for displaying a complex table header as a virtual table according to claim 1, characterized in that: After looping through the entire table data, it is easy to display a single-row header, and multi-level headers are processed as follows: First, create a MyTable component, in which el-table-column is replaced by the MyColumn component. MyColumn is an ordinary el-table-column component. The child element needs to determine whether there are children in the table header data obtained. If so, the MyColumn component needs to be recursively called. In this way, as long as it complies with the ledger business rules, it can be displayed.

3. A method for displaying a complex table header as a virtual table according to claim 2, characterized in that: The specific steps include the following: S1. Get table data; S2. Create a table column component MyColumn and add a drag event to a specific column; S3. Create a multi-level header table component MyTable, and replace the internal column component with MyColumn; S4. Input the header data and table content data, display the table, and drag a column to view the effect.

4. A method for displaying a complex table header as a virtual table according to claim 3, characterized in that: In step S1, the table data includes whether it is a multi-level header, as well as the header data and data structure - list nested children in a tree-like structure. The most detailed first-level header should be unique and there should be no merge of multiple columns.

5. A system for displaying complex table headers as virtual tables, characterized in that: Based on the ledger, the filling process involves the conversion of complex table headers to virtual table headers. The virtual table uses vue+elementui display method. The Element-ui table must clarify the header and then loop to display the entire table data.

6. A system for displaying a complex table header as a virtual table according to claim 5, characterized in that: After looping through the entire table data, it is easy to display a single-row header, and multi-level headers are processed as follows: First, create a MyTable component, in which el-table-column is replaced by the MyColumn component. MyColumn is an ordinary el-table-column component. The child element needs to determine whether there are children in the table header data obtained. If so, the MyColumn component needs to be recursively called. In this way, as long as it complies with the ledger business rules, it can be displayed.

7. A system for displaying a complex table header as a virtual table according to claim 6, characterized in that: The specific steps include the following: S1. Get table data; S2. Create a table column component MyColumn and add a drag event to a specific column; S3. Create a multi-level header table component MyTable, and replace the internal column component with MyColumn; S4. Input the header data and table content data, display the table, and drag a column to view the effect.

8. A system for displaying a complex table header as a virtual table according to claim 7, characterized in that: In step S1, the table data includes whether it is a multi-level header, as well as the header data and data structure - list nested children in a tree-like structure. The most detailed first-level header should be unique and there should be no merge of multiple columns.