CN114579098A - Method for linkage control of ElementUI form and list - Google Patents
Method for linkage control of ElementUI form and list Download PDFInfo
- Publication number
- CN114579098A CN114579098A CN202210271240.XA CN202210271240A CN114579098A CN 114579098 A CN114579098 A CN 114579098A CN 202210271240 A CN202210271240 A CN 202210271240A CN 114579098 A CN114579098 A CN 114579098A
- Authority
- CN
- China
- Prior art keywords
- list
- selection
- event
- data
- item
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 30
- 230000001360 synchronised effect Effects 0.000 claims abstract description 4
- 238000010187 selection method Methods 0.000 claims abstract description 3
- 230000001960 triggered effect Effects 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 7
- 230000008569 process Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000009471 action Effects 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000001737 promoting effect Effects 0.000 description 1
- 230000000717 retained effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/02—Total factory control, e.g. smart factories, flexible manufacturing systems [FMS] or integrated manufacturing systems [IMS]
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method for linkage control of an ElementUI form and a list, which comprises the following steps: when the multi-selection list is selected, the selected data is stored in an intermediate variable (selected data) and is synchronized to form data; when the list data is deleted, the intermediate variables need to be correspondingly operated, then the selected state of the list content needs to be updated, if the deleted data is not the current page data, the selected state of the row data of the list is invalid by calling a toggle selection method, and at this time, the selected state of the list needs to be correspondingly set again when the list is paged. The invention realizes the linkage control of the form and the selected list in the application program by comparing the list data of the current page with the checked data.
Description
Technical Field
The invention relates to the technical field of development of an Internet of things software platform, in particular to a method for linkage control of an ElementUI form and a list.
Background
Among many UI component libraries, ElementUI based on vue2.0 packaging is favored by a large number of developers. With the increase of service scenes, the basic components of the ElementUI cannot meet richer data interaction, so that a plurality of using methods are required to be added on the basis of the ElementUI basic components, and the ElementUI basic components are more suitable for application programs.
An existing ElementUI multi-selection list component can obtain all selected data under paging after setting a reserve-selection (only valid for a column with type = selection, the type is Boolean, and if the selected data is true, a "row-key required to be specified" before being retained after data updating) attribute is true, but when the selected data of the list is associated with form data to be linked with each other, the problem that the selected state of a certain row is invalid when a toggle RowSelection method is simply called is found, unexpected results are generated under various complex operations, and the function of linked control of the form and the list operation cannot be realized.
Disclosure of Invention
The invention aims to solve the technical problem of providing a method for linkage control of an ElementUI form and a list, which realizes the linkage control of the form data and the selected list in an application program by comparing the list data of a current page with the checked data.
In order to solve the above technical problems, the present invention comprises:
a method for ElementUI form and list linkage control, comprising the steps of:
step S1, writing form items in a template tag as el-select multi-selection components, and setting focus events and remove-tag events for removing tags; the list el-table in the popup is a multi-selection list, the list data is tableData, a row-key attribute is set, a reserve-selection attribute of a type = selection column is set to false, and a single-selection event handleSelect and a full-selection event handleSelect all are added to the list;
step S2, writing a single-selection event handleSelect and a full-selection select-all event handleSelect all, and synchronously updating form data after the single-selection event and the full-selection select-all event are processed;
the single selection event has two parameters, namely selection and row, whether the operation is a selection operation or a removal check operation is distinguished by judging whether the current operation item row exists in the entry selection, if so, the operation is the selection operation, and if not, the operation is the removal check operation;
the all-select-all event has a parameter selection, whether the all-select operation or the removal check operation is distinguished by judging whether the length of the entry selection is 0, if the length of the entry selection is 0, the removal check operation is indicated, and if the length of the entry selection is more than 0, the all-select operation is indicated;
and step S3, compiling an operation form data linkage list method, deleting form data, deleting the item existing in the intermediate variable, and then synchronizing the selected state of the list.
Further, in step S1, a popup list is displayed when the focus event is triggered, and a corresponding item in the intermediate variable and the selected state of the synchronous popup list are deleted when the remove-tag event is triggered.
Further, in step S1, the single-select event is an event triggered when the user manually checks the Checkbox of the data row, and the all-select event is an event triggered when the user manually checks the all-select Checkbox.
Further, in step S2, when a single select event is written, the select operation adds the piece of data to the intermediate variable this.
Further, in step S2, when a select-all event is written, traversing the current page data of the list, if the operation is in full selection, during the traversal of the current page data of the list, it is to be determined one by one whether each item already exists in the selected intermediate variables, if not, adding each item to the intermediate variables, and if yes, not processing; if the check operation is removed, judging whether the current item exists in the selected intermediate variables one by one during the process of passing the current page data of the list, deleting the current item from the intermediate variables when the current item exists, and not processing the current item when the current item does not exist.
Further, in step S3, when the form data is deleted, it is first determined whether the deleted item is current page data of the list, if the deleted item is current page data, the current page data of the list is traversed, and when the deleted item is not present in the intermediate variable and is current deleted item data, a toggle row selection method is called to set the selected state as false; if the data is not the current page data, resetting the selected state of the list when the list is switched to be paged, and calling the toggle RowSelection method to set the item to be selected as true.
The invention has the beneficial effects that:
the problem that the ElementUI list component cannot process the selected state of non-home-page selected data is solved, and the function of linkage control of form data and a multi-selection list is achieved.
Drawings
FIG. 1 is a flow chart of an embodiment of the present invention;
FIG. 2 is a table sheet of an embodiment of the present invention;
FIG. 3 is a diagram of a pop-up window list in accordance with an embodiment of the present invention;
fig. 4 is a diagram of a popup list association table according to an embodiment of the present invention.
Detailed Description
For the purpose of promoting an understanding of the invention, reference will now be made in detail to the present embodiments of the invention, examples of which are illustrated in the accompanying drawings. It should be understood by those skilled in the art that the examples are only for the understanding of the present invention and should not be construed as the specific limitations of the present invention.
As shown in fig. 1, the present invention provides a method for controlling an ElementUI form in linkage with a list, comprising the following steps:
step S1, compiling form items in a template tag into an el-select multi-selection component, setting focus events and remove-tag events for removing tags, displaying popup lists when the focus events are triggered, and deleting corresponding items in intermediate variables and selected states of synchronous popup lists when the move-tag events are triggered; the list el-table in the popup is a multi-selection list, the list data is tableData, a row-key attribute is set, a reserve-selection attribute of the type = selection column is set to false, and a single-selection event handleSelect and a full-selection event handleSelect all are added to the list. The effect diagrams are shown in fig. 2 and 3.
The list item can be an el-select multi-selection component or an el-tag removable component. The single-selection select event is an event triggered when the user manually checks the Checkbox of the data row, and the all-selection select-all event is an event triggered when the user manually checks the all-selection Checkbox.
Step S2, write single-select event handleselelectall and select-all event handleselelectall, and update form data synchronously after the single-select event and select-all event processing are completed, as shown in fig. 4.
The single selection event has two parameters, selection and row, and whether the operation is a selection operation or a removal check operation is distinguished by judging whether the current operation item row exists in the entry selection, wherein the presence indicates the selection operation, and the absence indicates the removal check operation. Selected device list under check operation, and delete the piece of data from the intermediate variable under remove check operation.
The all-select-all event has a parameter selection, whether the all-select operation or the cancel-select operation is distinguished by judging whether the length of the input selection is 0, if the length of the input selection (the selection is an array) is 0, the cancel-select operation is indicated, and if the length of the input selection is more than 0, the all-select operation is indicated.
Different from the single-selection select event, when a full-selection select-all event is written, traversing the current page data of the list, if the operation is in full selection, during the traversal of the current page data of the list, judging whether each item exists in the selected intermediate variables one by one, if not, adding the item to the intermediate variables, and if so, not processing; if the check operation is removed, judging whether the current item exists in the selected intermediate variables one by one during the process of passing the current page data of the list, deleting the current item from the intermediate variables when the current item exists, and not processing the current item when the current item does not exist.
And step S3, compiling an operation form data linkage list method, deleting form data, deleting the item existing in the intermediate variable, and then synchronizing the selected state of the list.
Because the selected data of the non-current page of the list is invalid by simply calling the toglerowselection method of the list, whether the deleted item is the current page data of the list needs to be judged at this time, if the deleted item is the current page data, the current page data of the list needs to be traversed, and the selected state is set to false by calling the toglerowselection method when the deleted item does not exist in an intermediate variable and is the current deleted item data; if not, no action is made on the list.
Because the selected data of the list non-current page is invalid by the toglerowselection method, if the form deletion item is the list non-current page data, the selected state of the list needs to be reset when the list paging is switched, and the method can be realized by calling the toglerowselection method to be set to true by the item needing to be selected.
Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.
Claims (6)
1. A method for ElementUI form and list linkage control, characterized by: the method comprises the following steps:
step S1, writing form items in a template tag as el-select multi-selection components, and setting focus events and remove-tag events for removing tags; the list el-table in the popup is a multi-selection list, the list data is tableData, a row-key attribute is set, a reserve-selection attribute of a type = selection column is set to false, and a single-selection event handleSelect and a full-selection event handleSelect all are added to the list;
step S2, writing a single-selection event handleSelect and a full-selection select-all event handleSelect all, and synchronously updating form data after the single-selection event and the full-selection select-all event are processed;
the single selection event has two parameters, namely selection and row, whether the operation is a selection operation or a removal check operation is distinguished by judging whether the current operation item row exists in the entry selection, if so, the operation is the selection operation, and if not, the operation is the removal check operation;
the all-select-all event has a parameter selection, whether the all-select operation or the removal check operation is distinguished by judging whether the length of the entry selection is 0, if the length of the entry selection is 0, the removal check operation is indicated, and if the length of the entry selection is more than 0, the all-select operation is indicated;
and step S3, compiling an operation form data linkage list method, deleting form data, deleting the item existing in the intermediate variable, and then synchronizing the selected state of the list.
2. The method for ElementUI form and list linkage control of claim 1, wherein: in step S1, the popup list is displayed when the focus event is triggered, and the corresponding item in the intermediate variable and the selected state of the synchronous popup list are deleted when the remove-tag event is triggered.
3. The method for ElementUI form and list linkage control of claim 1, wherein: in step S1, the single-select event is an event triggered when the user manually checks the Checkbox of the data row, and the all-select event is an event triggered when the user manually checks the all-select Checkbox.
4. The method for ElementUI form and list linkage control of claim 1, wherein: in step S2, when a single-select event is written, the selected piece of data is added to the intermediate variable this.
5. The method for ElementUI form and list linkage control of claim 1, wherein: in step S2, when a select-all event is written, traversing the current page data of the list, if the current page data of the list is a select-all operation, during the traversal of the current page data of the list, judging whether each item exists in the selected intermediate variables one by one, if not, adding the item to the intermediate variables, and if so, not processing the item; if the check operation is removed, judging whether the current item exists in the selected intermediate variables one by one during the process of passing the current page data of the list, deleting the current item from the intermediate variables when the current item exists, and not processing the current item when the current item does not exist.
6. The method for ElementUI form and list linkage control of claim 1, wherein: in step S3, when the form data is deleted, it is first determined whether the deleted item is current page data of the list, if the deleted item is current page data, the current page data of the list is traversed, and if the deleted item is not present in the intermediate variable and is current deleted item data, a toggle row selection method is called to set the selected state as false; if the page data is not the current page data, resetting the selected state of the list when the list is switched to be paged, and calling a tokgleRowSelection method to set the item to be selected as true.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210271240.XA CN114579098B (en) | 2022-03-18 | 2022-03-18 | Method for ElementUI form and list linkage control |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210271240.XA CN114579098B (en) | 2022-03-18 | 2022-03-18 | Method for ElementUI form and list linkage control |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114579098A true CN114579098A (en) | 2022-06-03 |
| CN114579098B CN114579098B (en) | 2024-05-28 |
Family
ID=81782045
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210271240.XA Active CN114579098B (en) | 2022-03-18 | 2022-03-18 | Method for ElementUI form and list linkage control |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114579098B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115293121A (en) * | 2022-10-09 | 2022-11-04 | 中孚安全技术有限公司 | Element-UI-based form linkage method and terminal |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7934149B1 (en) * | 1999-09-30 | 2011-04-26 | Instantis, Inc. | Automated creation and maintenance of programs to process internet form related submissions |
| CN109471694A (en) * | 2018-10-29 | 2019-03-15 | 恒生电子股份有限公司 | Drop-down list management method and drop-down list |
| CN109542439A (en) * | 2018-11-20 | 2019-03-29 | 四川长虹电器股份有限公司 | The method that list data batch selection based on Angular2+ is submitted |
| CN111832272A (en) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | Method for realizing form nesting form function based on element-ui |
| WO2020253059A1 (en) * | 2019-06-18 | 2020-12-24 | 平安科技（深圳）有限公司 | Method and apparatus for implementing multi-stage linkage drop-down box, and computer device |
| CN112417333A (en) * | 2020-11-20 | 2021-02-26 | 普元信息技术股份有限公司 | System and method for selecting target data from large amount of data based on Web application front end |
| CN113760251A (en) * | 2020-11-09 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Form development method and device based on Vue |
| CN114021533A (en) * | 2021-10-29 | 2022-02-08 | 济南浪潮数据技术有限公司 | Optimization method and device for batch selection of data of tables and storage medium |
-
2022
- 2022-03-18 CN CN202210271240.XA patent/CN114579098B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7934149B1 (en) * | 1999-09-30 | 2011-04-26 | Instantis, Inc. | Automated creation and maintenance of programs to process internet form related submissions |
| CN109471694A (en) * | 2018-10-29 | 2019-03-15 | 恒生电子股份有限公司 | Drop-down list management method and drop-down list |
| CN109542439A (en) * | 2018-11-20 | 2019-03-29 | 四川长虹电器股份有限公司 | The method that list data batch selection based on Angular2+ is submitted |
| WO2020253059A1 (en) * | 2019-06-18 | 2020-12-24 | 平安科技（深圳）有限公司 | Method and apparatus for implementing multi-stage linkage drop-down box, and computer device |
| CN111832272A (en) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | Method for realizing form nesting form function based on element-ui |
| CN113760251A (en) * | 2020-11-09 | 2021-12-07 | 北京沃东天骏信息技术有限公司 | Form development method and device based on Vue |
| CN112417333A (en) * | 2020-11-20 | 2021-02-26 | 普元信息技术股份有限公司 | System and method for selecting target data from large amount of data based on Web application front end |
| CN114021533A (en) * | 2021-10-29 | 2022-02-08 | 济南浪潮数据技术有限公司 | Optimization method and device for batch selection of data of tables and storage medium |
Non-Patent Citations (2)
| Title |
|---|
| 冯莉；冯辉: "Ad Hoc网多信道MAC协议的分析与CMCT协议及其改进协议PC-CMCT", 信息技术, no. 01, 15 January 2008 (2008-01-15) * |
| 王蛟；周亚建；杨义先: "基于可信列表的启发式流量检测方法", 北京邮电大学学报, no. 02, 15 April 2008 (2008-04-15) * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115293121A (en) * | 2022-10-09 | 2022-11-04 | 中孚安全技术有限公司 | Element-UI-based form linkage method and terminal |
| CN115293121B (en) * | 2022-10-09 | 2023-03-24 | 中孚安全技术有限公司 | Element-UI-based form linkage method and terminal |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114579098B (en) | 2024-05-28 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108664245B (en) | Method and device for generating web page interface based on JSON self-description structure | |
| US11231959B2 (en) | Foreground and background switching entry generation and display following quit operations | |
| US6167455A (en) | Method and system for synchronous operation of linked command objects | |
| CN106547624B (en) | Android-based picture loading method and device | |
| CN103164268A (en) | System optimization method and system optimization device | |
| CN107291449B (en) | Page rendering method, device and equipment | |
| CN109145272B (en) | Text rendering and layout method, device, equipment and storage medium | |
| CN114579098A (en) | Method for linkage control of ElementUI form and list | |
| CN103294451A (en) | Method and system for implementing applied multiple tasks and multiple windows in rich page | |
| CN112352214A (en) | Display control device, display control method, and display control program | |
| CN112631591A (en) | Table element linkage method, device, equipment and computer readable storage medium | |
| US7409642B2 (en) | Method and system for applying user interface elements to data | |
| CN101377746A (en) | System and method for updating arranged task | |
| CN111324398B (en) | Method, device, terminal and storage medium for processing latest content | |
| CN112685487B (en) | Method and apparatus for simulating relational database through IndexDB in browser environment | |
| JP3409269B2 (en) | Program creation device | |
| CN108073658B (en) | Data synchronization system and method | |
| CN114385295B (en) | Method and system for displaying pictures in comparison waterfall flow mode | |
| CN110968569A (en) | Database management method, database management device, and storage medium | |
| JP2009009473A (en) | Design device and design method for gui and program | |
| JPH0619655A (en) | Method for displaying of data field of multientry on video display of computer in object-oriented software prpgram | |
| JP7484033B1 (en) | Method, program and information processing device for changing a database management system | |
| CN117055994B (en) | Data-driven-based interactive interface implementation method and processing terminal | |
| CN109343756B (en) | Method for controlling recording and changing sound through gesture touch and sliding operation in android system, memory and terminal | |
| CN116820319A (en) | Method and system for controlling browser interface return in iOS application through gestures |
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 |