CN115293121B - Element-UI-based form linkage method and terminal - Google Patents
Element-UI-based form linkage method and terminal Download PDFInfo
- Publication number
- CN115293121B CN115293121B CN202211224130.4A CN202211224130A CN115293121B CN 115293121 B CN115293121 B CN 115293121B CN 202211224130 A CN202211224130 A CN 202211224130A CN 115293121 B CN115293121 B CN 115293121B
- Authority
- CN
- China
- Prior art keywords
- data
- parent
- page
- child
- selection
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 60
- 230000008859 change Effects 0.000 claims abstract description 15
- 230000006870 function Effects 0.000 claims description 15
- 238000012217 deletion Methods 0.000 claims description 8
- 230000037430 deletion Effects 0.000 claims description 8
- 230000008569 process Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 11
- 238000004891 communication Methods 0.000 description 6
- 238000012545 processing Methods 0.000 description 6
- 238000012790 confirmation Methods 0.000 description 5
- 230000001960 triggered effect Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 2
- 230000000717 retained effect Effects 0.000 description 2
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/103—Formatting, i.e. changing of presentation of documents
- G06F40/114—Pagination
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/174—Form filling; Merging
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the field of table linkage, in particular to a table linkage method and a terminal based on Element-UI.A father table is configured to have a page-crossing multi-selection function for a multi-selection table; adding a choice change event and setting a ref attribute to the parent table; paging and displaying the data of the parent form in a dialog box; triggering a selection item change event for each data operation in the parent table, and displaying the finally selected data in the parent table in the child table; when executing page switching on the parent table, retaining the data selection state before page switching; and under the condition that the data exists in the sub-tables, when the dialog box is called out, all the data in the sub-tables are selected in the parent table through a ref attribute and a toggleRowSelection method. The invention realizes linkage between the two tables by simpler logic, the data selected in the parent table can be quickly and accurately displayed in the child table, and when the dialog box is opened again, the parent table realizes the selection of the data in the child table.
Description
Technical Field
The invention relates to the field of table linkage, in particular to a table linkage method and a terminal based on Element-UI.
Background
The background management system displays data by using a common form and realizes the data adding, deleting, modifying and checking by matching with the form. The background system is mostly composed of list pages, and the list pages comprise a table component, a paging component, a form component related to query and a button. The table is the focus of each list page, which is the primary container of presentation data. Others are added to facilitate the user's browsing or manipulation of the form data.
Each list page is not independent, and there is an association between data of some list pages. For example: when a new order data is added, the data in the commodity list needs to be selected. The order is composed of the goods selected for purchase, and the order cannot be generated without selecting the goods. When the form is filled with the newly added data, in a scene where the form data needs to be selected, the form data to be selected may be many (for example, 1000 different commodities exist), and is not convenient to be displayed on the form page. However, the form page may use the form to display the selected data, which after all is less (e.g., 5 items selected) and is actually used for form submission (order generation). In order to make the form to be selected independent of the form page, a selection button is added to the form page, and after the selection button is clicked, a dialog box is opened, and the form to be selected is displayed in the dialog box. Because the form page table data is composed of the selected form data in the dialog box and is a subset of the form data in the dialog box, the form in the dialog box is called a parent form in the following, and the form of the form page is called a child form.
The scheme of selecting data in a parent table and displaying the data in a child table in the current implementation is as follows: creating intermediate variables, storing the selected data in the parent table, traversing the intermediate variables when the data of the table is singly selected, fully selected, deselected or deselected, operating the intermediate variables by judging whether the selected or deselected data is in the intermediate variables or not, and achieving the purpose of storing the latest selected data by the intermediate variables. The sub-table shows the data of the intermediate variable, and when the data of the sub-table is deleted, the corresponding data in the intermediate variable is deleted at the same time. The parent table traverses the current page data to select data in the intermediate variables.
The current solution has the following disadvantages: firstly, a form does not support cross-page multi-selection, when a page number is switched, the state selected by a page before the page number is switched can be cleared, and when the page number is switched back, a user cannot know which data of the page is selected previously; secondly, the selected data in the parent table is obtained by distinguishing single selection, full selection, single selection cancellation, full selection cancellation and operation of intermediate variables, so that the steps are complicated and the efficiency is low; thirdly, the processing mode of selecting the data of the child table from the parent table is insufficient, and the scene of continuously performing the operation of selecting and canceling the operation of selecting the child table from the parent table after the data in the child table is selected from the parent table is not considered, so that the operation intermediate variable becomes abnormal and complicated and even is uncontrollable.
Disclosure of Invention
In order to solve the problems, the invention provides a form linkage method and a terminal based on Element-UI (user interface), which realize cross-page multi-selection of a parent form, do not need intermediate variables, use a selected item to change an event to obtain selected data, improve the efficiency, and once select all data in the child form in the parent form and continuously select other data when a dialog box is opened again.
In a first aspect, the technical scheme of the invention provides a form linkage method based on Element-UI, which comprises the following steps:
(1) A step of configuring a dialog box containing a parent form and a paging component;
configuring a father table as a multi-selection table and having a function of page crossing and multi-selection;
adding a choice change event to the parent table;
setting ref attribute for the parent table;
(2) Displaying data;
paging and displaying the data of the parent form in a dialog box;
operating data in the father table, wherein the operation comprises single selection, full selection, single selection cancellation and full selection cancellation, each operation triggers a selection item change event, and finally selected data in the father table is displayed in the child table;
based on the page-crossing multi-selection function of the parent table, when page switching is executed on the parent table, the selected state of data before page switching is reserved;
when the dialog box is called out in the state that the sub-table has data, all the data in the sub-table are selected in the parent table through the ref attribute and the toggleRowSelection method.
Further, the method may further comprise,
the back end configures a return data interface:
the return data interface comprises a paging acquisition data interface and a non-paging acquisition data interface, wherein the paging acquisition data interface returns data of a certain page to the front end according to the page number transmitted by the front end and the number of display strips of each page, and the non-paging acquisition data interface returns all data of the parent table to the front end at one time.
Further, performing paging display on the parent form data in the dialog box specifically includes:
judging whether the sub-table has data or not;
if no data exists, calling a paging data acquisition interface, and acquiring the data of the 1 st page and displaying the data in a parent table;
if the data exists, calling a non-paging data acquisition interface, acquiring all data of the father table at one time, and intercepting the data of the page 1 from all the data of the father table and displaying the data in the father table;
correspondingly, when the dialog box is called out in the state that the child table has data, firstly, the data of the page 1 is intercepted from all the data of the parent table and displayed in the parent table, and then all the data in the child table are selected in the parent table through a ref attribute and a toggleRowSelection method.
Further, all data in the child table are selected in the parent table by a ref attribute and a toggleRowSelection method, which specifically includes:
executing a double-layer for loop;
the outer layer circularly traverses all data of the parent table, and the inner layer circularly traverses the data of the child table;
when the ID of a certain piece of data in all data of the parent table is the same as the ID of a certain piece of data in the sub-table data, selecting the piece of data in the parent table through a ref attribute and a toggleRowSelection method;
and after the double-layer circulation execution is finished, selecting all data in the child table from the parent table.
Further, the method may further comprise,
configuring a sub-table with deletion operation:
binding the sub-table data to a child List variable;
when a deletion button of a certain row in the sub-table is clicked, triggering a click event, and deleting data of the row corresponding to the sub-table in a child List variable;
accordingly, the inner loop through the sub-table data refers to traversing the child list variable.
Further, the finally selected data in the parent table is displayed in the child table, and the method specifically comprises the following steps:
forming an array by selected data in the parent table, and assigning the array to a checkedRows variable;
assigning a checkedRows variable to a child List variable;
the dialog box is closed and the sub-table data is presented in the sub-table based on the child list variable.
Furthermore, in the data display process, a paging acquisition data interface is called in a parent table to perform page number switching or display number switching of each page.
Further, the step of configuring the dialog box containing the parent form and the paging component further comprises:
a row click event row-click is added to the parent table.
In a second aspect, an embodiment of the present invention provides a terminal, including:
the memory is used for storing an Element-UI-based table linkage program;
and the processor is used for realizing the steps of the Element-UI-based table linkage method when the Element-UI-based table linkage program is executed.
Compared with the prior art, the Element-UI-based form linkage method and the terminal provided by the invention have the following beneficial effects: linkage between two forms is realized with simpler logic, and the data of selecting in the father form can be fast and accurately shown in the child form, and when the dialog box is opened again, the father form realizes selecting the data in the child form with simpler logic: firstly, the parent table is configured with a page-crossing multi-selection function, when the page number is switched, the selected state of the previous data is reserved, and when the page number is switched back, the selected data can still be seen, and the data is not selected. Secondly, the selected data of the father table can be accurately taken without distinguishing single selection, full selection, single selection cancellation, full selection cancellation and the like, and without operating intermediate variables, only by configuring the table, cross-page multi-selection can be performed, and selection-change events are added. Thirdly, all data in the child table are selected in the parent table at one time, even if the user switches page numbers again and each page displays a plurality of data, the selected state of a certain row still cannot be changed, the parent table can be selected continuously or the selection operation can be cancelled, and the latest selected item can be displayed in the child table after the operation. Therefore, data linkage between the two tables is simpler and more accurate.
Drawings
For a clearer explanation of the embodiments or technical solutions of the prior art of the present application, the drawings needed for the description of the embodiments or prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
FIG. 1 is a schematic view of a sub-table interface (no data in the sub-table) of the present invention.
FIG. 2 is a schematic diagram of a dialog interface including a parent form of the present invention (corresponding to the unchecked data in the parent form of FIG. 1).
FIG. 3 is a first schematic diagram of a selected data interface in a parent table of the present invention.
FIG. 4 is a second schematic diagram of a selected data interface in the parent table of the present invention.
Fig. 5 is a sub-table interface schematic based on fig. 3 and 4.
FIG. 6 is a schematic flow diagram of a form linkage method based on Element-UI according to an embodiment of the invention.
FIG. 7 is a schematic diagram of the sub-table interface after the first two rows of data are deleted on the basis of FIG. 5.
FIG. 8 is a schematic diagram of a selected data interface on page 1 of the parent table based on FIG. 7.
Fig. 9 is a schematic method flow diagram of a specific embodiment of a form linkage method based on Element-UI according to an embodiment of the present invention.
Fig. 10 is a schematic structural diagram of a terminal according to an embodiment of the present invention.
Detailed Description
In order that those skilled in the art will better understand the disclosure, the following detailed description will be given with reference to the accompanying drawings. It is to be understood that the embodiments described are only a few embodiments of the present application and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The Element-UI is a desktop-side component library developed based on Vue 2.0. The method has the advantages of rich components, more styles, uniform style, easy operation, stable code and capability of providing various component attributes and trigger event lists. The component library can quickly realize simple service scenes, but when the service scenes are complex, an additional design needs to be matched on the basis of using the Element-UI component to realize the target service scenes. The method is applied to a scene that form data needs to be selected when a new data filling form is added, and linkage of a parent form and a child form is realized based on Element-UI.
Fig. 1 is a schematic view of an interface of a child form (no data is in the child form) of the present invention, a dialog box containing a parent form is called by clicking a button for selecting a commodity in the child form, fig. 2 is a schematic view of an interface of a dialog box containing a parent form of the present invention (corresponding to fig. 1, no selected data is in the parent form), selected data in the parent form is displayed in the child form, fig. 3 is a schematic view of a selected data interface in the parent form of the present invention, fig. 4 is a schematic view of a selected data interface in the parent form of the present invention, displayed in the child form based on selected data in the parent form of fig. 3 and 4, and fig. 5 is a schematic view of an interface of a child form based on fig. 3 and 4.
Fig. 6 is a schematic flow chart of a table linkage method based on Element-UI according to an embodiment of the present invention, and the method includes the following steps in order to realize quick, effective and accurate linkage of a parent table and a child table.
(1) A step of configuring a dialog box containing a parent form and a paging component.
1.1, configuring a father table as a multi-selection table and having a function of page crossing and multi-selection.
The parent table is a multi-selection table, binds parentList variables, sets the row-key attribute, and sets the reserve-selection attribute of type = selection column to true, thereby enabling the parent table to be multi-selected across pages.
The parent table is a multi-selection table and can be selected across pages, so that when the page number of the parent table is switched, the data before switching is still retained, for example, all data of page 1 is selected in fig. 3, then the page number is switched to page 180, and then 2 rows of data in page 180 (fig. 4) are selected, at this time, all data selected in page 1 is retained, and then all data of page 1 and 2 rows of data of page 180 are displayed in the child table (as shown in fig. 5).
1.2, add option change events to the parent table.
And adding a selection change event selection-change to the parent table, wherein the event is triggered no matter single selection, full selection, single selection cancellation or full selection cancellation, and the latest selected data is acquired.
And the selected item change event is matched with the cross-page multi-option, and the data selected in the parent table is quickly transmitted to the child table for display.
1.3, setting ref attribute for the parent table.
(2) And displaying the data.
And 2.1, performing paging display on the data of the parent table in the dialog box.
As shown in fig. 2, in the dialog box, there are a plurality of pages in the parent table, and the user switches the page number to select data of the corresponding page.
And 2.2, operating the data in the parent table, wherein the operation comprises single selection, full selection, single selection cancellation and full selection cancellation, each operation triggers a selection item change event, and finally selected data in the parent table is displayed in the child table.
The parent form is configured with a selection item changing event, each operation performed by a user triggers the event to update the selected data in time, and the finally selected data is displayed in the child form when a confirmation button is clicked.
And 2.3, based on the page crossing multi-selection function of the parent table, when page switching is executed on the parent table, the selected state of the data before page switching is reserved.
And 2.4, when the dialog box is called out in the state that the data exists in the sub-table, selecting all the data in the sub-table from the parent table through the ref attribute and the toggleRowSelection method.
As shown in fig. 1 and 2, when there is no data in the child table, the user clicks the select item button in the child table, and the state of the dialog box called up is as shown in fig. 2, and there is no selected data in the parent table. When the data is already in the sub-form and the commodity selection button is clicked again, after the dialog box is called out, the function of displaying the data in the selected sub-form can be realized in the parent form, and the data selection can be continued on the basis of the current selection. For example, if the select goods button is clicked in the state of fig. 5, then the state of fig. 3 and fig. 4 will be obtained after the dialog box is called, and based on the state of fig. 3 and fig. 4, a certain row of data may be continuously selected or deselected, for example, if the last two rows of data of page 180 are continuously selected, after the confirmation button is clicked, 9 pieces of data including all data of page 1 in the parent table and 4 rows of data selected in page 180 are displayed in the child table, and if the first two rows of data of page 180 are deselected on the basis of fig. 3 and fig. 4, after the confirmation button is clicked, only 5 rows of data of page 1 selected in the parent table will be displayed in the child table.
Based on the method, the linkage between the two forms can be realized through simple logic, the data selected in the parent form can be quickly and accurately displayed in the child form, and when the dialog box is opened again, the parent form also realizes the selection of the data in the child form through simpler logic: firstly, the parent table is configured with a page-crossing multi-selection function, when the page number is switched, the selected state of the previous data is reserved, and when the page number is switched back, the selected data can still be seen, and the data is not selected. Secondly, the selected data of the father table can be accurately taken without distinguishing single selection, full selection, single selection cancellation, full selection cancellation and the like, and without operating intermediate variables, only by configuring the table, cross-page multi-selection can be performed, and selection-change events are added. Thirdly, all data in the child table are selected in the parent table at one time, even if the user switches page numbers again and each page displays a plurality of data, the selected state of a certain row still cannot be changed, the parent table can be selected continuously or the selection operation can be cancelled, and the latest selected item can be displayed in the child table after the operation. Therefore, data linkage between the two tables is simpler and more accurate.
Of course, if a certain data in the sub-table is no longer needed, the data can be deleted, and accordingly, the embodiment of the present invention further includes the following steps.
(3) And configuring a sub-table with deletion operation.
3.1, binding the child table data to the child List variable.
3.2, when a delete button of a certain row in the sub-table is clicked, triggering a click event, and deleting the data of the row corresponding to the sub-table in the child List variable.
The child table data binds the child list variable, and the child table is displayed based on the data in the child list variable, that is, the data of the child list variable is displayed in the child table. When a delete button of a row in the sub-table is clicked, the operation triggers the child list variable to delete the data of the row corresponding to the sub-table, and the row of data is not displayed in the sub-table any more.
It should be noted that, after data is selected in the parent table, the selected data is transmitted to the child list variable for being displayed in the child table, specifically:
forming an array by selected data in the parent table, and assigning the array to a checkedRows variable;
assigning a checkedRows variable to a child List variable;
the dialog box is closed and the sub-table data is presented in the sub-table based on the child list variable.
Data deletion is performed on the basis of fig. 5, fig. 7 is a schematic diagram of a child table interface after the first two rows of data are deleted on the basis of fig. 5, the data of the first two rows of the page 1 in the parent table are deleted, and then the item selection button is clicked again, at this time, the selected state of the page 1 in the parent table is as shown in fig. 8, and fig. 8 is a schematic diagram of a selected data interface of the page 1 in the parent table on the basis of fig. 7. Of course, at this time, the 2 rows of data selected from page 180 in the parent table are still in the child table (as shown in fig. 7), and the selected data state of page 180 in the parent table is still as shown in fig. 4.
And deleting data in the sub-table, wherein the data still exists in the sub-table, and the state is still the state that the data exists in the sub-table.
After clicking a commodity selection button, calling a dialog box to display the parent form data, wherein the parent form data needs to be transmitted to the front end by the back end to be displayed.
The return data interface comprises a paging acquisition data interface and a non-paging acquisition data interface, wherein the paging acquisition data interface returns data of a certain page to the front end according to the page number transmitted by the front end and the number of display strips of each page, and the non-paging acquisition data interface returns all data of the parent table to the front end at one time.
According to the embodiment of the invention, the corresponding interface is called according to the state of the data in the sub-table, so that when the data exists in the sub-table, all the data in the sub-table can be quickly selected from the parent table.
Specifically, after a commodity selection button is clicked, a dialog box is called out, and the parent form data is displayed in a paging mode in the dialog box, and the method is realized through the following steps:
step one, judging whether data exist in a sub-table or not;
step two, if no data exists, calling a paging data acquisition interface, and acquiring the data of the page 1 and displaying the data in a parent table;
and step three, if the data exist, calling a non-paging data acquisition interface, acquiring all data of the father table at one time, and intercepting the data of the 1 st page from all the data of the father table to display in the father table. And simultaneously, after the data of the page 1 are intercepted and displayed in the parent table, selecting all the data in the child table in the parent table by a ref attribute and a toggleRowSelection method.
When the sub-table has no data, the data of page 1 of the parent table is displayed for the user firstly, so that the user can conveniently select the data subsequently. When data exists in the sub-table, the page 1 of the parent table is also intercepted for display, and the page display can be carried out more quickly.
When data exists in the sub-tables, the dialog box receives all data of the parent table transmitted by the back end, and all data in the sub-tables are selected in the parent table through the ref attribute and the toggleRowSelection method. The embodiment of the invention realizes the purpose of quickly selecting all data in the sub-table in the parent table through double-layer for circulation.
Selecting all data in the child table in the parent table by a ref attribute and a toggleRowSelection method, and specifically comprising the following steps:
step one, executing double-layer for circulation;
step two, the outer layer circularly traverses all data of the parent table, and the inner layer circularly traverses the data of the child table;
step three, when the ID of a certain piece of data in all data of the parent table is the same as the ID of a certain piece of data in the sub-table data, selecting the piece of data in the parent table through a ref attribute and a toggleRowSelection method;
and step four, after the double-layer circulation execution is finished, selecting all data in the child table from the parent table.
Of course, the child table data binds the child List variable, which the inner loop actually traverses. In this loop, the outer loop traverses the allData, rather than the child list variable, and is the data that can hit the first page as quickly as possible, allowing the user to see the hit status more quickly.
The embodiment of the invention is provided with the paging acquisition data interface, and correspondingly, in the data display process, the paging acquisition data interface is called in the father table to switch the page number or the number of display strips of each page.
Based on the above embodiment, in order to realize linkage of the parent table and the child table, the worker writes the following programs in specific implementation.
1) Writing a sub-table with deletion operation, binding child List variables by sub-table data, triggering a click event when a deletion button is clicked, and deleting data of a certain row of the sub-table.
2) Writing a dialog box containing a parent table and a paging component, wherein the parent table is a multi-selection table, binding a parentList variable, setting a row-key attribute, and setting a reserve-selection attribute of a type = selection column to true, so that the parent table can be selected in multiple ways across pages; adding a selection change event selection-change to the parent table, wherein the event is triggered no matter single selection, full selection, single selection cancellation or full selection cancellation, and the latest selected data is obtained; a row-click event row-click is added to the table, which can be checked or unchecked whether the check box to the left of the row is clicked or anywhere on the row.
3) And writing a callback method of the selected item change event, and acquiring the selected data in the parent table. The event has only one parameter selection, i.e. an array of selected data in the parent table. Selection is assigned to the variable checkedRows for use in the sub-table display.
4) And writing a callback method for clicking a confirmation button of the dialog box, assigning the ckedRows to a child List variable, and closing the dialog box. Therefore, the effect that the selected data in the parent table is displayed in the child table is achieved.
5) Two interfaces for returning data are written for returning data of the parent table. One is an interface for acquiring data by paging, and can return data of a certain page according to the page number transmitted from the front end and the parameters of how many data in each page; one is an interface for acquiring data without paging, and all data of the parent table is returned to the front end at one time. ( For example: the father table shows a commodity list, 1000 commodities exist, the page number is 1, each page shows 30 pieces of data, the interface for acquiring data in a paging mode returns data of the previous 30 commodities, and the interface for acquiring data in a paging mode returns data of all 1000 commodities. )
6) The callback method for writing the click event of the selection button not only displays the dialog box, but also carries out different processing on the data of the parent form according to the existence of the data in the child form. And when the child table has no data, calling an interface for obtaining data by paging, obtaining the data of the first page, and displaying the data in the parent table. When the child table has data, it means that the parent table needs to select the data in the child table. And calling an interface for acquiring data without paging, and acquiring all data allData at one time.
7) And processing the allData, displaying the data in the parent table and selecting the data in the child table. Intercepting data of a first page in the allData, assigning the data to a parentList, and displaying the data of the first page in a parent table; setting ref for a parent table, executing double-layer for circulation, enabling an outer layer to circulate all data and an inner layer to circulate a child list, selecting data in the parent table by a ref and toggleRowSelection method when the id of the data in all data is the same as the id of the data in the child list, and enabling the parent table to select all data in the child table after the double-layer circulation is executed.
8) And when the page number is switched or how many pieces of data are displayed in each page is switched, calling an interface for paging to acquire data.
Based on the writing program, the realization principle of data in the child table in the parent table selection is as follows: when the form supports page-crossing multi-selection, the data in the child form can be selected in the parent form by taking all data through an interface for acquiring data without paging and using a double-layer for loop matched with a toggleRowSelection method. And the selected state does not disappear as the parent table re-requests the interface to obtain data. Thus, when the page number is switched or how many pieces of data are displayed per page is switched, the selected state of a certain row is still in. The user can continue to select the data or cancel the selected data, and a selection-change event is triggered to take the latest selected data, click to confirm and display the latest selected data in the sub-table. By utilizing a table page-crossing and multi-selection mechanism, combining interfaces for acquiring data in paging and data without paging and some simple processing, accurate and smooth table linkage can be realized. In the above 7), the data of the first page is assigned to the child list for page display, and then the double-layer for loop is performed, so that the user can see the data more quickly. The outer loop traverses the allData, not the child list, and is the data that can hit the first page as soon as possible, allowing the user to see the hit status more quickly.
Based on the above embodiment and the writing program, the method flow of a specific embodiment shown in fig. 9 is implemented, as shown in fig. 9, the operations of single selection, single selection cancellation, full selection cancellation and full selection cancellation are performed on the parent form data, the selection-change event is triggered to select the data, and the data is updated to the child form data. After clicking a commodity selection button on a child table interface, judging whether data exists in the child table or not, if not, calling a paging acquisition data interface to acquire page 1 data of a parent table from the rear end, updating the data to the parent table, if so, calling a non-paging acquisition data interface to acquire all data of the parent table from the rear end, then intercepting the page 1 data from all data of the parent table, updating the data to the parent table, and simultaneously selecting the data displayed in the child table from the parent table to update the data of the parent table. And calling a paging acquisition data interface to switch page numbers or update the number of the display data of each page to the parent table at the parent table end. And clicking a delete button at the sub-table end to delete a certain piece of data and update the data into the sub-table.
Each piece of data in the parent form is provided with a check box in front, a multi-selection function is provided, the data in the parent form can be selected in a multi-selection mode in a page-crossing mode, a confirmation button is clicked, the dialog box disappears, and the selected data are displayed in the child form and used for form submission. When the selection button is clicked again, the data in the sub-table is selected by the parent table, and the user can visually see which data are selected and which data are not selected, so that the user can conveniently select more data or deselect some data. The sub-form page has a deleting function, and can delete a certain piece of data, and when the dialog box is opened, the parent form cancels the selection of the data. Therefore, the linkage between the parent table and the child table is realized, and after the data is selected or deselected in the parent table, all the selected data are displayed in the child table; when a button for selecting the commodity is clicked, the data in the sub-table is selected by the parent table, and the data selected by increasing or decreasing is easy and visual.
Fig. 10 is a schematic structural diagram of a terminal device 1000 according to an embodiment of the present invention, including: a processor 1010, a memory 1020, and a communication unit 1030. The processor 1010 is used for realizing the Element-UI based table linkage program stored in the memory 1020 and realizing the following steps:
(1) Configuring a dialog box containing a parent form and a paging component;
configuring a father table as a multi-selection table and having a page-crossing multi-selection function;
adding a choice change event to the parent table;
setting ref attributes for the parent table;
(2) Displaying data;
paging and displaying the data of the parent form in a dialog box;
operating data in the father table, wherein the operation comprises single selection, full selection, single selection cancellation and full selection cancellation, each operation triggers a selection item change event, and finally selected data in the father table is displayed in the child table;
based on the page-crossing multi-selection function of the parent table, when page switching is executed on the parent table, the selected state of data before page switching is reserved;
when the dialog box is called out in the state that the sub-table has data, all the data in the sub-table are selected in the parent table through the ref attribute and the toggleRowSelection method.
The invention realizes linkage between two forms by simpler logic, the data selected in the parent form can be quickly and accurately displayed in the child form, and when the dialog box is opened again, the parent form realizes the selection of the data in the child form by the simpler logic.
The terminal apparatus 1000 includes a processor 1010, a memory 1020, and a communication unit 1030. The components communicate via one or more buses, and those skilled in the art will appreciate that the architecture of the servers shown in the figures is not intended to be limiting, and may be a bus architecture, a star architecture, a combination of more or less components than those shown, or a different arrangement of components.
The memory 1020 may be used for storing instructions executed by the processor 1010, and the memory 1020 may be implemented by any type of volatile or non-volatile storage terminal or combination thereof, such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk. The executable instructions in memory 1020, when executed by processor 1010, enable terminal 1000 to perform some or all of the steps in the method embodiments described below.
The processor 1010 is a control center of the storage terminal, connects various parts of the entire electronic terminal using various interfaces and lines, and performs various functions of the electronic terminal and/or processes data by operating or executing software programs and/or modules stored in the memory 1020 and calling data stored in the memory. The processor may be composed of an Integrated Circuit (IC), for example, a single packaged IC, or a plurality of packaged ICs connected with the same or different functions. For example, the processor 1010 may include only a Central Processing Unit (CPU). In the embodiment of the present invention, the CPU may be a single operation core, or may include multiple operation cores.
A communication unit 1030 for establishing a communication channel so that the storage terminal can communicate with other terminals. And receiving user data sent by other terminals or sending the user data to other terminals.
Those skilled in the art will readily appreciate that the techniques of the embodiments of the present invention may be implemented using software plus any required general purpose hardware platform. Based on such understanding, the technical solutions in the embodiments of the present invention may be embodied in the form of a software product, where the computer software product is stored in a storage medium, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and the like, and the storage medium can store program codes, and includes instructions for enabling a computer terminal (which may be a personal computer, a server, or a second terminal, a network terminal, and the like) to perform all or part of the steps of the method in the embodiments of the present invention.
In the embodiments provided in the present invention, it should be understood that the disclosed system, apparatus and method may be implemented in other ways. For example, the above-described apparatus embodiments are merely illustrative, and for example, the division of the units is only one logical division, and other divisions may be realized in practice, for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, devices or units, and may be in an electrical, mechanical or other form.
The units described as separate parts may or may not be physically separate, and parts shown as units may or may not be physical units, may be located in one position, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.
The above disclosure is only for the preferred embodiments of the present invention, but the present invention is not limited thereto, and any non-inventive changes that can be made by those skilled in the art and several modifications and amendments made without departing from the principle of the present invention shall fall within the protection scope of the present invention.
Claims (9)
1. A form linkage method based on Element-UI is characterized by comprising the following steps:
(1) A step of configuring a dialog box containing a parent form and a paging component;
configuring a father table as a multi-selection table and having a page-crossing multi-selection function;
adding a choice change event to the parent table;
setting ref attributes for the parent table;
(2) Displaying data;
paging and displaying the data of the parent form in the dialog box;
operating data in the father table, wherein the operation comprises single selection, full selection, single selection cancellation and full selection cancellation, each operation triggers a selection item change event, and finally selected data in the father table is displayed in the child table;
based on the page-crossing multi-selection function of the parent table, when page switching is executed on the parent table, the selected state of data before page switching is reserved;
when a dialog box is called out in the state that the sub-table has data, all the data in the sub-table are selected in the parent table through a ref attribute and a toggleRowSelection method;
(3) Configuring a sub-table with deletion operation;
binding the child table data to a child List variable;
and when a deletion button of a certain row in the sub-table is clicked, triggering a click event, and deleting the data of the row corresponding to the sub-table in the child List variable.
2. The Element-UI based form linkage method of claim 1, further comprising,
the back end configures a return data interface:
the return data interface comprises a paging acquisition data interface and a non-paging acquisition data interface, wherein the paging acquisition data interface returns data of a certain page to the front end according to the page number transmitted by the front end and the number of display strips of each page, and the non-paging acquisition data interface returns all data of the parent table to the front end at one time.
3. The Element-UI based form linkage method of claim 2, wherein the pagination display of the parent form data in the dialog box specifically comprises:
judging whether the sub-table has data or not;
if no data exists, calling a paging data acquisition interface, and acquiring the data of the 1 st page and displaying the data in a parent table;
if the data exists, calling a non-paging data acquisition interface, acquiring all data of the father table at one time, and intercepting the data of the page 1 from all the data of the father table and displaying the data in the father table;
correspondingly, when the dialog box is called out in the state that the child table has data, firstly, the data of the page 1 is intercepted from all the data of the parent table and displayed in the parent table, and then all the data in the child table are selected in the parent table through a ref attribute and a toggleRowSelection method.
4. The Element-UI based table linkage method according to claim 3, wherein all data in a child table is selected in a parent table by a ref attribute and a toggleRowSelection method, and the method specifically comprises the following steps:
executing a double-layer for loop;
the outer layer circularly traverses all data of the parent table, and the inner layer circularly traverses the data of the child table;
when the ID of a certain piece of data in all data of the parent table is the same as the ID of a certain piece of data in the sub-table data, selecting the piece of data in the parent table through a ref attribute and a toggleRowSelection method;
and after the double-layer circulation execution is finished, selecting all data in the child table from the parent table.
5. The Element-UI based table linkage method of claim 4, wherein the inner-layer loop traversal of sub-table data refers to traversal of a child List variable.
6. The Element-UI based form linkage method according to claim 5, wherein the finally selected data in the parent form is displayed in the child form, and the method specifically comprises the following steps:
forming an array by selected data in the parent table, and assigning the array to a checkedRows variable;
assigning a checkedRows variable to a child List variable;
the dialog box is closed and the sub-table data is presented in the sub-table based on the child list variable.
7. The Element-UI based form linkage method according to any of the claims 2-6, characterized in that in the data display process, a paging acquisition data interface is called in a father form to switch page numbers or the number of display pieces per page.
8. The Element-UI based form linkage method according to claim 7, wherein the step of configuring a dialog box including a parent form and a paging component further comprises:
a row click event row-click is added to the parent table.
9. A terminal, comprising:
the memory is used for storing an Element-UI-based table linkage program;
a processor for implementing the Element-UI based table linkage method according to any one of claims 1-8 when executing the Element-UI based table linkage program.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211224130.4A CN115293121B (en) | 2022-10-09 | 2022-10-09 | Element-UI-based form linkage method and terminal |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211224130.4A CN115293121B (en) | 2022-10-09 | 2022-10-09 | Element-UI-based form linkage method and terminal |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115293121A CN115293121A (en) | 2022-11-04 |
| CN115293121B true CN115293121B (en) | 2023-03-24 |
Family
ID=83833951
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211224130.4A Active CN115293121B (en) | 2022-10-09 | 2022-10-09 | Element-UI-based form linkage method and terminal |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115293121B (en) |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112241267A (en) * | 2020-09-16 | 2021-01-19 | 武汉木仓科技股份有限公司 | Configuration tool and method for realizing form page development by using same |
| CN114579098A (en) * | 2022-03-18 | 2022-06-03 | 河钢数字技术股份有限公司 | Method for linkage control of ElementUI form and list |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20100077324A1 (en) * | 2008-09-23 | 2010-03-25 | Microsoft Corporation | Pluggable presentation and domain coupling |
| CN114021533A (en) * | 2021-10-29 | 2022-02-08 | 济南浪潮数据技术有限公司 | Optimization method and device for batch selection of data of tables and storage medium |
-
2022
- 2022-10-09 CN CN202211224130.4A patent/CN115293121B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112241267A (en) * | 2020-09-16 | 2021-01-19 | 武汉木仓科技股份有限公司 | Configuration tool and method for realizing form page development by using same |
| CN114579098A (en) * | 2022-03-18 | 2022-06-03 | 河钢数字技术股份有限公司 | Method for linkage control of ElementUI form and list |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115293121A (en) | 2022-11-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112866785B (en) | Picture generation method, device, equipment and storage medium | |
| US11321057B2 (en) | Single-page web application builder system and method based on a finite-state machine | |
| CN109847355B (en) | Game object selection method and device | |
| CN110377851A (en) | Implementation method, device and the computer equipment of multistage linking combobox | |
| US10853364B2 (en) | Direct table association in in-memory databases | |
| CN108874926A (en) | Mass data inquiry method, device, computer equipment and storage medium | |
| US20140075383A1 (en) | Displaying an application set identifier | |
| CN111309213A (en) | Comment display method and device, electronic equipment and storage medium | |
| CN111857718B (en) | List editing method, device, equipment and storage medium | |
| CN113779479B (en) | Webpage form editing method, device, equipment and storage medium | |
| CN111626823B (en) | Display method and device | |
| CN115543282A (en) | Page code generation method and device, storage medium and computer equipment | |
| CN115293121B (en) | Element-UI-based form linkage method and terminal | |
| CN109255104A (en) | Certification template configuration method, apparatus, computer equipment and storage medium | |
| CN117218239A (en) | Data processing method and device, electronic equipment and readable storage medium | |
| CN110297578B (en) | Method and device for processing partial data in mass data in batch and electronic equipment | |
| CN106649320B (en) | rectangular tree graph processing method and device | |
| CN109508220A (en) | Finance data interface creating method, device, computer equipment and storage medium | |
| CN109460524A (en) | Method, apparatus, storage medium and the client that the page returns | |
| CN112417333A (en) | System and method for selecting target data from large amount of data based on Web application front end | |
| CN115951811B (en) | Component generation method and device | |
| CN115268884B (en) | Mobile terminal visual page configuration and rendering method based on aPaaS platform | |
| CN108846107A (en) | Processing method, device and the intelligent terminal of website user information | |
| CN112034993B (en) | Input method, input device, computer device and storage medium | |
| CN117492731A (en) | Component management method, device, equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |