Element Plus-based table editing method and apparatus, and electronic device

Abstract

The invention provides a table editing method and device based on an Element Plus and electronic equipment, and the table editing method based on the Element Plus comprises the following steps: configuring a visual form based on an Element Plus component library; capturing the operation of triggering the editing instruction by the operation body and the position information of the corresponding data line in real time; if the operation that the operation body triggers the editing instruction is captured, according to the position information of the data line, the editing state of the cells in the data line is modified into an editable state, and the editing state comprises a non-editable state and an editable state; obtaining editing data input by an operation body in the cells in the data lines, and displaying the editing data in the cells in real time; capturing an operation of triggering a saving instruction by an operation body in real time; and if the operation that the operation body triggers the storage instruction is captured, storing the data in the data line to the server, and refreshing the current visual form. According to the invention, the development and maintenance difficulty can be reduced, and the operation process of the user can be optimized.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and particularly relates to a table editing method based on Element Plus, a table editing device based on Element Plus, and an electronic device. Background Art

[0002] In the technical stack environment of Vue3, when processing table data on the web page, pop-up windows or drawers and other pop-up interfaces are often used to implement the data editing function. However, using such pop-up interfaces to edit table data will increase the workload of code editing, increase the difficulty of development and maintenance, and also increase the user operation steps and the rendering burden on the browser. Summary of the Invention

[0003] The present invention is made based on the inventor's discovery and recognition of the following facts and problems:

[0004] In the technical stack environment of Vue3, when developers face the complex table data processing requirements on the web page, they often choose to use pop-up windows or drawers and other pop-up interfaces as the main means to implement the data editing function. These pop-up interfaces can provide a relatively independent space for users to modify and update data to a certain extent, ensuring the cleanliness of the main interface and the centralization of operations. However, a series of problems they bring cannot be ignored.

[0005] From the perspective of developers, each pop-up window or drawer component requires developers to develop independently, including the layout design of the interface, the implementation of data binding logic, the writing of event handling functions, etc. These tasks are not only cumbersome and complex, but also extremely prone to errors during development, increasing the difficulty of development and debugging. As the functions of the application continue to expand and upgrade, the number of pop-up window or drawer components that need to be maintained will also increase exponentially, which undoubtedly further increases the overall workload of development and maintenance.

[0006] In addition, since pop-up windows or drawers usually exist as independent components, the data interaction and state synchronization between them and the main interface require developers to design and implement carefully. Once handled improperly, problems such as data inconsistency, interface flickering or crashing may occur, seriously affecting the stability of the application and the user experience.

[0007] From the perspective of users, the appearance of pop-up windows or drawers and other pop-up interfaces will interrupt the user's operation process and increase the user's operation steps. Users need to first click a certain button to trigger the display of the pop-up window or drawer, then perform data editing operations in the popped-up interface, and finally click the save button to submit the modification. This series of cumbersome operation steps not only reduces the user's operation efficiency, but also easily makes users feel tired and dissatisfied.

[0008] To this end, the present invention provides a table editing method based on Element Plus, a table editing device based on ElementPlus, and an electronic device, which can simplify the code editing workload of developers, reduce the difficulty of development and maintenance, optimize the user operation process, and reduce the rendering burden on the browser, thereby providing users with a smoother, more stable and efficient data editing experience.

[0009] The table editing method based on Element Plus provided by the embodiments of the present invention includes the following steps:

[0010] Based on the Element Plus component library, configure a visual form, the visual form includes a plurality of data rows and a plurality of operation controls, the operation controls correspond to the data rows one by one, and the operation controls at least include an edit instruction and a save instruction;

[0011] Real-time capture the operation of the operation body triggering the edit instruction and the position information of the corresponding data row;

[0012] If it is captured that the operation body triggers the operation of the edit instruction, then according to the position information of the data row, modify the edit state of the cells in the data row to an editable state, and the edit state includes a non-editable state and an editable state;

[0013] Obtain the edit data input by the operation body in the cells of the data row, and display the edit data in the cells in real time;

[0014] Real-time capture the operation of the operation body triggering the save instruction;

[0015] If it is captured that the operation body triggers the operation of the save instruction, then save the data in the data row to the server and refresh the current visual form.

[0016] In summary, the table editing method based on Element Plus provided by the present invention can optimize the user operation process, improve the operation efficiency, reduce the rendering burden on the browser, and improve the response speed and stability of the page by displaying operation controls in the form and real-time monitoring the interaction between the user and the interface for data editing and saving. In addition, for developers, this method can quickly build a fully functional visual form by using the Element Plus component library configuration, while reducing the development work of duplicate code and custom components, thereby improving the development efficiency and reducing the maintenance cost.

[0017] In some embodiments, each row of data in the visualization form has a switchable first page and second page. When the data row is on the first page, an edit instruction is displayed on the data row; when the data row is on the second page, a save instruction is displayed on the data row, and input boxes are displayed in the cells of the data row.

[0018] The step of, if an operation of the operation body triggering the edit instruction is captured, modifying the edit state of the cells in the data row to an editable state according to the position information of the data row includes:

[0019] If an operation of the operation body triggering the edit instruction is captured, then according to the position information, switch the data row corresponding to the position information from the first page to the second page, and modify the edit state of the cells in the data row to an editable state;

[0020] The step of refreshing the current visualization form includes:

[0021] Switch the data row from the second page to the first page, and display the edited data in the cells of the data row.

[0022] In some embodiments, the input boxes in the cells of the data row include at least one of a text input box, a number input box, a dropdown box, a date selection box, and a cascading selection box.

[0023] In some embodiments, the step of, if an operation of the operation body triggering the edit instruction is captured, modifying the edit state of the cells in the data row to an editable state according to the position information of the data row further includes the steps:

[0024] When an operation of the operation body triggering the edit instruction is captured, obtain the identity information of the operation body;

[0025] According to the position information, determine the position of the data row and the identity verification rule corresponding to the cells in the data row;

[0026] Judge whether the identity information of the operation body conforms to the identity verification rule;

[0027] If the identity information of the operation body conforms to the identity rule, modify the edit state of the cells in the data row from a non-editable state to an editable state;

[0028] If the identity information of the operation body does not conform to the identity rule, maintain the edit state of the cells in the data row as a non-editable state.

[0029] In some embodiments, the step of obtaining the edited data input by the operation entity in the cell within the data row and displaying the edited data in the cell in real time includes:

[0030] Obtain the edited data input by the operation entity in the cell within the data row and the corresponding verification rule for the cell;

[0031] Verify the edited data based on the verification rule;

[0032] If the edited data does not conform to the verification rule, a warning box is popped up.

[0033] In some embodiments, the step of, if it is captured that the operation entity triggers a save instruction operation, saving the data within the data row to the server and refreshing the current visual form includes:

[0034] Obtain the corresponding verification rule for the cell within the data row;

[0035] Verify the edited data input by the operation entity based on the verification rule;

[0036] If the edited data conforms to the verification rule, save the edited data within the data row to the server and refresh the visual form;

[0037] If the input data does not conform to the verification rule, do not perform the save, and pop up a warning box or update the data within the current data cell to the original data before editing.

[0038] In some embodiments, the verification rule includes a first rule, a second rule, and a third rule; the first rule is set as whether the cell is a required item; the second rule is set as whether the edited data input by the operation entity is a number; the third rule is set as whether the edited data input by the operation entity conforms to a preset value range.

[0039] In some embodiments, after the step of configuring the visual form based on the ElementPlus component library in the table editing method based on Element Plus, the following steps are further included:

[0040] Monitor in real time whether the operation entity triggers a check box instruction;

[0041] If the operation entity triggers a check box instruction, display check boxes on each data row within the visual form;

[0042] Obtain at least one data row selected by the operation entity through the check box;

[0043] Obtain in real time the operation instruction triggered by the operation entity, where the operation instruction includes one or more combinations of batch deletion, batch export, and batch editing;

[0044] Perform a check operation on at least one data row selected by the operating body according to the operation instruction triggered by the operating body.

[0045] In addition, the table editing device based on Element Plus provided by the present invention includes:

[0046] A form configuration module for configuring a visual form according to the Element Plus component library. The visual form includes a plurality of data rows and a plurality of operation controls, and the operation controls correspond to the data rows one by one. The operation controls at least include an edit instruction and a save instruction;

[0047] An instruction capture module for capturing in real time the operation of the operating body triggering the edit instruction and the position information of the corresponding data row, and also for capturing in real time the operation of the operating body triggering the save instruction;

[0048] A modification module for, when capturing the operation of the operating body triggering the edit instruction, modifying the edit state of the cells in the data row to an editable state according to the position information of the data row. The edit state includes an uneditable state and an editable state;

[0049] A data display module for obtaining the edit data input by the operating body in the cells of the data row and displaying the edit data in the cells in real time;

[0050] A data saving module for, when capturing the operation of the operating body triggering the save instruction, saving the data in the data row to the server and refreshing the current visual form.

[0051] In addition, the electronic device provided by an embodiment of the present invention includes a processor and a memory. The memory stores machine-readable instructions executable by the processor. When the machine-readable instructions are executed by the processor, the steps in the table editing method based on Element Plus provided in any of the above embodiments are executed. Description of the Drawings

[0052] The drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the following specific embodiments, they are used to explain the embodiments of the present invention, but do not constitute a limitation to the embodiments of the present invention. In the drawings:

[0053] Figure 1 It is a schematic flowchart of a table editing method based on Element Plus provided by an embodiment of the present invention.

[0054] Figure 2It is a schematic diagram showing that the data row in the visual form in the table editing method based on Element Plus provided by an embodiment of the present invention is on the first page.

[0055] Figure 3 It is a schematic diagram showing that the data row in the visual form of the table editing method based on Element Plus provided by an embodiment of the present invention is on the second page.

[0056] Figure 4 It is a schematic diagram showing that the input box in the data row cell in the table editing method based on Element Plus provided by an embodiment of the present invention is a dropdown box.

[0057] Figure 5 It is a schematic diagram showing that the input box in the data row cell in the table editing method based on Element Plus provided by an embodiment of the present invention is a cascading selection box.

[0058] Figure 6 It is a schematic diagram showing the configuration of the verification rule in the table editing method based on Element Plus provided by an embodiment of the present invention.

[0059] Figure 7 It is a schematic diagram showing that the visual form configuration of the table editing method based on Element Plus provided by an embodiment of the present invention has checkboxes.

[0060] Figure 8 It is a schematic diagram showing the structure of the table editing device based on Element Plus provided by an embodiment of the present invention.

[0061] Figure 9 It is a schematic diagram showing the hardware structure of the electronic device provided by an embodiment of the present invention.

[0062] Reference numerals:

[0063] 100, Table editing device based on Element Plus; 110, Form configuration module, 120, Instruction capture module, 130, Modification module; 140, Data display module, 150, Data storage module;

[0064] 210, Processor; 220, Memory; 230, Communication interface; 240, Communication bus. Detailed implementation manners

[0065] The embodiments of the present invention will be described in detail below. The examples of the embodiments are shown in the accompanying drawings. The embodiments described below by referring to the accompanying drawings are exemplary and are intended to explain the present invention, and should not be construed as limiting the present invention.

[0066] Reference Figure 1, which is a schematic flow chart of a table editing method based on Element Plus provided by an embodiment of the present invention.

[0067] The table editing method based on Element Plus includes the following steps:

[0068] S10, based on the Element Plus component library, configure a visual form, the visual form includes multiple data rows and multiple operation controls, the operation controls correspond to the data rows one by one, and the operation controls include an edit instruction and a save instruction.

[0069] That is to say, build a visual form based on the Element Plus component library. Each row in the visual form represents a set of associated data, and an operation control is configured on each data row. The operation control may include an edit instruction and a save instruction. The edit instruction is used to allow the operator to edit the data row corresponding to the edit instruction. The save instruction is used to confirm the edited content and store it.

[0070] S20, capture in real time the operation of the operator triggering the edit instruction and the position information of the corresponding data row.

[0071] That is to say, monitor the interaction between the user and the interface in real time, especially the situation where the user triggers the edit instruction through operations such as the mouse or keyboard. Once it is detected that the edit instruction is triggered, record the action and the position information of its associated data row, such as the row number, so as to accurately identify the specific data row that the user wants to edit.

[0072] It should be noted that the operator refers to the physical entity that interacts with this solution, which can be a part of the user's body (such as fingers, palms), or a device component (such as a stylus, a sensor module, a mouse or a keyboard).

[0073] S30, if it is captured that the operator triggers the operation of the edit instruction, then according to the position information of the data row, modify the edit state of the cells in the data row to an editable state, and the edit state includes a non-editable state and an editable state.

[0074] That is to say, when it is captured that the edit instruction is triggered, according to the recorded position information of the data row, switch the edit state of the cells in the data row from a non-editable state to an editable state, so that the user can input or modify data in the cells, improving the flexibility and efficiency of data processing.

[0075] S40, obtain the edit data input by the operator in the cells of the data row, and display the edit data in the cells in real time.

[0076] That is to say, when the data row is in an editable state, the system starts to record and display in real time any editing data entered by the user in the cell, implementing an instant feedback mechanism that allows the user to intuitively see the changes in the editing data for each input.

[0077] S50, capture in real time the operation of the operating body triggering the save instruction.

[0078] That is to say, when the data row is in an editable state, the system monitors in real time the triggering of the save instruction to ensure that the content edited by the user can be correctly saved.

[0079] S60, if it is captured that the operating body triggers the operation of the save instruction, save the data in the data row to the server and refresh the current visual form.

[0080] That is to say, when the system detects that the save instruction is triggered, the editing data in the current data row is sent to the server for storage by means of a network request. After the data is successfully saved, the system will automatically refresh the current visual form to reflect the latest data status, which not only ensures the persistence of the data, but also provides the user with a view of instant update for easy viewing of the latest data changes.

[0081] In summary, the table editing method based on Element Plus provided by the present invention can optimize the user operation process, improve the operation efficiency, reduce the rendering burden of the browser, and improve the response speed and stability of the page by displaying operation controls in the form and monitoring the interaction between the user and the interface in real time for data editing and saving. In addition, for developers, this method can quickly build a visual form with complete functions by using the Element Plus component library configuration, while reducing the development work of duplicate code and custom components, thereby improving the development efficiency and reducing the maintenance cost.

[0082] Such as Figure 2 and Figure 3 shown, in some embodiments, each data row in the visual form has a switchable first page and second page. When the data row is on the first page, an edit instruction is displayed on the data row; when the data row is on the second page, a save instruction is displayed on the data row, and an input box is displayed on the cell of the data row. This switchable design not only improves the beauty and neatness of the user interface, but also makes the editing and saving operations more intuitive and easy to understand. The user can freely switch between viewing data and editing data by simply switching pages, without complex operations or additional click steps.

[0083] Specifically, each data row in the visualization form is designed to have a switchable first page and second page, thereby providing a more intuitive and convenient operation interface for users. When the data row is on the first page, an edit instruction is displayed on this page. The edit instruction can be presented in the form of a button or an icon, which is convenient for users to quickly identify and click to enter the edit mode. When the data row is on the first page, the content of the data row is usually presented in a read-only state, and users cannot directly modify the data in the cells, but can activate the edit function by clicking the edit instruction.

[0084] When the data row switches to the second page, the interface layout is adjusted accordingly. At this time, a save instruction is displayed on the page, and input boxes are also displayed on the cells of the data row. The save instruction can also exist in the form of a button or an icon, indicating that the user is currently in an editable state. In the input box, users can freely input or edit data, and the system will capture and display these edit contents in real time, providing instant visual feedback to users.

[0085] In this embodiment, the switching of the data row between the first page and the second page can be accompanied by the triggering of the edit instruction and the save instruction. That is to say, the step of modifying the edit state of the cells in the data row to an editable state according to the position information when it is detected that the operation body triggers the edit instruction includes: when it is detected that the operation body triggers the edit instruction, according to the position information, the data row corresponding to the position information is switched from the first page to the second page, and the edit state of the cells in the data row is modified to an editable state.

[0086] The step of refreshing the current visualization form includes: switching the data row from the second page to the first page, and displaying the edited data in the cells within the data row.

[0087] Furthermore, the data row has multiple cells. The multiple cells can be divided into data cells and operation instruction cells, and both the edit instruction and the save instruction are set in the operation instruction cells. When the data row switches from the first page to the second page, the edit instruction in the operation instruction cell can change to a save instruction.

[0088] As Figure 2 and Figure 3 shown, in some embodiments, the operation control also includes a test instruction, a delete instruction, a cancel instruction, and an assign permission instruction. Among them, the test instruction can test or preview the content of the data row. That is, when the user clicks the test instruction, a series of preset test processes can be triggered, and the system will verify and check the data row according to these processes to ensure that it complies with the established business rules and data standards.

[0089] The delete instruction provides a convenient way for users to delete data rows. When a user determines that a certain data row is no longer needed, simply click the delete instruction, and the system can perform the corresponding deletion operation, which helps users quickly clean up invalid or redundant data and keep the table neat and efficient.

[0090] The cancel instruction is used to provide an option to undo the edit after the user has edited the data but before saving. That is, when the user realizes that they have made a mistake during the editing process or want to abandon the current edited content, simply click the cancel instruction, and the system can restore the data row to the state before editing.

[0091] The assign permission instruction provides users with the function of managing permissions for data rows. By clicking the assign permission instruction, users can specify which users or roles can view, edit, or delete specific data rows, which helps ensure the security and privacy of data and prevents unauthorized users from accessing or modifying sensitive data.

[0092] When the data row is on the first page, the operation instruction cell may be provided with a test instruction, an edit instruction, and a delete instruction. It should be noted that the arrangement order of the test instruction, the edit instruction, and the delete instruction does not need to be limited. For example, the arrangement order can be the test instruction, the edit instruction, and the delete instruction, or it can be the edit instruction, the delete instruction, and the test instruction. In this embodiment, the arrangement order of the test instruction, the edit instruction, and the delete instruction is the test instruction, the edit instruction, and the delete instruction. When the data row is on the second page, the operation instruction cell may be provided with an assign permission instruction, a save instruction, and a cancel instruction. Similarly, the arrangement order of the assign permission instruction, the save instruction, and the cancel instruction does not need to be limited. In this embodiment, the arrangement order is the assign permission instruction, the save instruction, and the cancel instruction.

[0093] That is to say, when the data row switches from the first page to the second page, the test instruction in the operation instruction cell changes to the assign permission instruction, the edit instruction changes to the save instruction, and the delete instruction switches to the cancel instruction.

[0094] Such as Figure 4 and Figure 5 As shown, in some embodiments, the input boxes in the cells of the data row include at least one of a text input box, a number input box, a dropdown box, a date selection box, and a cascading selection box.

[0095] Among them, the text input box is suitable for inputting and editing text-type data, such as names, descriptions, remarks, etc. Users can freely input or modify text content in the text input box, and the system will capture and display these editing results in real time.

[0096] The numeric input box is specifically used for inputting and editing numeric data, such as amounts, quantities, fractions, etc. The numeric input box usually includes a numeric keypad or numeric format verification function to ensure that the data entered by the user conforms to the numeric format requirements. The numeric input box may have "+" and "-" symbols to facilitate user operations.

[0097] The dropdown box provides the user with a predefined list of options, and the user can select one or more options from the list as the content of the data row. The dropdown box is suitable for inputting data with a fixed set of options, such as different items like golden cake, double skin milk, dragon beard noodles, etc.

[0098] The date selection box allows the user to select a specific date as the content of the data row through a calendar interface. The date selection box usually includes functions for selecting the year, month, and date, as well as features such as date range verification and formatted display to meet the user's input and display requirements for date data.

[0099] The cascading selection box is used to input data with a hierarchical relationship, such as guidelines - design principles - consistency, feedback, efficiency, controllability, etc. After the user selects a value from the upper-level option, the lower-level options will be dynamically updated according to the value of the upper-level option, thus forming a hierarchical selection chain, which can help the user input and select data with a hierarchical relationship more intuitively and accurately.

[0100] In some embodiments, the step of modifying the editing state of the cells within the data row to an editable state according to the position information of the data row when it is detected that the operating body triggers an editing instruction further includes the steps:

[0101] When it is detected that the operating body triggers an editing instruction, obtain the identity information of the operating body;

[0102] According to the position information, determine the position of the data row and the corresponding identity verification rule for the cells within the data row;

[0103] Judge whether the identity information of the operating body conforms to the identity verification rule;

[0104] If the identity information of the operating body conforms to the identity rule, modify the editing state of the cells within the data row from a non-editable state to an editable state;

[0105] If the identity information of the operating body does not conform to the identity rule, maintain the editing state of the cells within the data row as a non-editable state.

[0106] That is to say, the table editing method based on Element Plus provided by the present invention further incorporates an authentication mechanism to ensure that only operating entities with corresponding permissions can edit the cells within a data row.

[0107] When an operation triggering an edit instruction by an operating entity (such as a user's finger, mouse pointer, or keyboard input) is captured, the system will quickly capture and identify the identity information of the operating entity, which typically includes the user's login name, role, permission level, or other unique identifiers. Next, based on the captured position information, the system will accurately locate the data row where the edit instruction was triggered and the corresponding cell within it. Then, according to the preset authentication rule library, the system will retrieve the authentication rules corresponding to the cell within the data row. These rules may include user role restrictions, permission level requirements, specific operation conditions, etc., to ensure that only users meeting specific conditions can edit the cell.

[0108] After obtaining the identity information of the operating entity and the corresponding authentication rules, the system will perform a detailed judgment process. If the identity information of the operating entity meets the requirements of the authentication rules, that is, the user has the permission to edit the cell, then the system will change the edit state of the cell within the data row from non - editable to editable. At this time, the user can freely input or modify the data within the cell, and the system will capture and display these edit contents in real - time.

[0109] However, if the identity information of the operating entity does not meet the requirements of the authentication rules, that is, the user does not have the permission to edit the cell, then the system will maintain the edit state of the cell within the data row as non - editable. This means that the user will not be able to perform any editing operations on the cell, thus ensuring the integrity and security of the data.

[0110] It should be noted that this authentication mechanism is not only applicable to the editing operation of a single cell but can also be extended to the permission management of the entire data row or table. By setting different authentication rules for different data rows or cells, the system can achieve more refined and flexible permission control to meet the needs of different users or roles.

[0111] In addition, to enhance the user experience and interface friendliness, the system can also provide friendly prompt information when a user attempts to edit a locked cell, informing the user that they do not have the permission to edit the cell. In this way, users can more clearly understand their operation permissions and avoid performing invalid or incorrect operations.

[0112] Such as Figure 6As shown, in some embodiments, the steps of obtaining the edited data input by the operation body in the cell within the data row and displaying the edited data in the cell in real time include:

[0113] Obtain the edited data input by the operation body in the cell within the data row and the corresponding verification rules for the cell;

[0114] Based on the verification rules, verify the edited data;

[0115] If the edited data does not conform to the verification rules, a warning box is popped up.

[0116] Further, the steps of, if it is captured that the operation body triggers a save instruction operation, saving the data within the data row to the server and refreshing the current visual form include:

[0117] Obtain the corresponding verification rules for the cells within the data row;

[0118] Based on the verification rules, verify the edited data input by the operation body;

[0119] If the edited data conforms to the verification rules, save the edited data within the data row to the server and refresh the visual form;

[0120] If the input data does not conform to the verification rules, do not perform the save, and pop up a warning box or update the data within the current data cell to the original data before editing.

[0121] Specifically, in the steps of obtaining the edited data input by the operation body in the cell within the data row and displaying these edited data in the cell in real time, the system will simultaneously capture and identify the corresponding verification rules for the cell. These verification rules may include various conditions such as data type, format requirements, value range, required fields, etc., to ensure that the data input by the user conforms to the business logic and data standards.

[0122] Then, the system will perform real-time verification and inspection on the edited data input by the operation body based on these verification rules. If the edited data does not meet the requirements of the verification rules, the system will immediately pop up a warning box, prompting the user that the input data is incorrect and indicating the specific reason for the error. In this way, the user can promptly discover and correct the error, avoiding performing invalid or incorrect operations.

[0123] Similarly, in the step of capturing the operation of the operator triggering the save instruction, saving the data in the data row to the server, and refreshing the current visual form, the system will also first obtain the verification rules corresponding to the cells in the data row and verify the edited data input by the operator. This step is the last line of defense before data saving, used to ensure that the data to be saved is accurate, complete, and compliant with business rules.

[0124] If the edited data meets the requirements of the verification rules, the system will save these edited data to the server and refresh the visual form to display the updated data. In this way, users can see that the data they just edited has been successfully saved and updated.

[0125] However, if the edited data does not meet the requirements of the verification rules, the system will reject the save operation and pop up a warning box or update the data in the current data cell to the original data before editing. In this way, users can avoid data inconsistency or business logic errors caused by entering incorrect data.

[0126] Furthermore, the verification rules include a first rule, a second rule, and a third rule. The first rule is set as whether the cell is a required item, that is, whether the user must enter data to save. The second rule is set as whether the edited data input by the operator is a number, that is, whether the data input by the user meets the digital format requirements. The third rule is set as whether the edited data input by the operator meets the preset value range, that is, whether the data input by the user is within the range allowed by the business rules.

[0127] As Figure 7 shown, in some embodiments, the table editing method based on Element Plus further includes the steps after the step of configuring the visual form in the Element Plus component library:

[0128] Real-time monitor whether the operator triggers a check instruction;

[0129] If the operator triggers a check instruction, display checkboxes on each data row in the visual form;

[0130] Obtain at least one data row selected by the operator through the checkbox;

[0131] Real-time obtain the operation instructions triggered by the operator, and the operation instructions include one or more combinations of batch deletion, batch export, and batch editing;

[0132] According to the operation instructions triggered by the operator, perform a check operation on at least one data row selected by the operator.

[0133] Specifically, during the process of configuring the visual form, a check instruction, such as a check box, will be configured on the form. During the execution of the table editing method based on Element Plus, the system will continuously monitor whether the operating body (such as the user's finger, mouse pointer, etc.) triggers the check instruction. This instruction usually manifests as a specific operation performed by the user on the interface, such as clicking a certain button or checking a certain option. Once the system detects that the operating body triggers the check instruction, check boxes will be displayed on each data row within the visual form. These check boxes allow the user to select one or more data rows for subsequent batch operations.

[0134] Next, the system will obtain at least one data row selected by the operating body through the check box. This step is the basis for batch processing, ensuring that the system can accurately identify the data rows that the user wants to operate on. After obtaining the data rows selected by the user, the system will continue to continuously monitor the operation instructions triggered by the operating body. Once the system detects that the operating body triggers a certain operation instruction, it will immediately perform a check operation on the at least one selected data row according to the instruction.

[0135] Among them, the operation instruction may be one or a combination of multiple of batch deletion, batch export, and batch editing. Batch deletion allows the user to delete multiple data rows at once. Batch export allows the user to export the selected multiple data rows into a specific file format; while batch editing allows the user to perform unified editing operations on the selected multiple data rows.

[0136] It should be noted that these steps of the check operation not only improve the user's data processing ability but also enhance the interactivity and friendliness of the user interface. That is, by providing intuitive check boxes and rich operation instructions, the user can more conveniently perform batch processing on data, thereby improving work efficiency and accuracy.

[0137] In addition, it should be clear that Figure 1 the flow diagram of the table editing method based on Element Plus shown in [reference], the order of the steps is only shown based on the logical order provided by one of the numerous embodiments of the present invention. This order is intended to clearly illustrate the execution process of the method in a specific application scenario. However, in actual applications, the flexibility and scalability of the present invention allow technicians to adjust the order of the above steps according to different actual requirements and environmental conditions. For example, there may be a parallel or juxtaposed relationship between some steps, which will not be elaborated here one by one.

[0138] Refer to Figure 8, is a schematic structural diagram of a table editing device 100 based on Element Plus provided by an embodiment of the present invention. The table editing device 100 based on Element Plus includes a form configuration module 110, an instruction capture module 120, a modification module 130, a data display module 140, and a data saving module 150. The above-mentioned modules are electrically connected to each other to achieve the transmission and reception of information. Of course, in some embodiments, the form configuration module 110, the instruction capture module 120, the modification module 130, the data display module 140, and the data saving module 150 can also be integrated into one body to make the overall structure more compact.

[0139] Among them, the form configuration module 110 is used to configure a visual form according to the Element Plus component library. The visual form includes a plurality of data rows and a plurality of operation controls. The operation controls correspond to the data rows one by one. The operation controls at least include an edit instruction and a save instruction;

[0140] The instruction capture module 120 is used to capture in real time the operation of the operation body triggering the edit instruction and the position information of the corresponding data row, and can also be used to capture in real time the operation of the operation body triggering the save instruction;

[0141] The modification module 130 is used to modify the edit state of the cells in the data row to an editable state according to the position information of the data row when it captures the operation of the operation body triggering the edit instruction. The edit state includes a non-editable state and an editable state;

[0142] The data display module 140 is used to obtain the edit data input by the operation body in the cells of the data row and display the edit data in the cells in real time;

[0143] The data saving module 150 is used to save the data in the data row to the server and refresh the current visual form when it captures the operation of the operation body triggering the save instruction.

[0144] It should be noted that the implementation principle and the technical effects generated by the table editing device based on Element Plus provided by the embodiments of the present application are the same as those of the foregoing embodiments of the table editing method based on Element Plus. For a brief description, for the parts not mentioned in the device embodiments, reference can be made to the corresponding content in the foregoing embodiments of the table editing method based on Element Plus.

[0145] Refer to Figure 9, which is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present invention. The electronic device provided by this embodiment includes a processor 210 and a memory 220. The memory 220 stores machine-readable instructions executable by the processor 210. When the machine-readable instructions are executed by the processor 210, the steps in the table editing method based on Element Plus described in any of the previous embodiments are executed. Among them, there is at least one processor 210 and one memory 220.

[0146] In this embodiment, the electronic device further includes a communication interface 230 and a communication bus 240. Among them, the processor 210, the memory 220, and the communication interface 230 are connected to each other through the communication bus 240. The communication bus 240 can be divided into an address bus, a data bus, a control bus, etc. For the sake of simplicity, Figure 3 only a thick line is used to represent the communication bus 240 in the figure, but it does not mean that there is only one communication bus 240 or one type of communication bus 240. The processor 210 can also be called a controller, and there is no restriction on the name.

[0147] In the embodiment of the present application, the memory 220 stores instructions executable by at least one processor 210. By executing the instructions stored in the memory 220, at least one processor 210 can execute the steps in the table editing method based on Element Plus described above. The processor 210 can implement Figure 3 the functions of each module in the device shown.

[0148] Among them, the processor 210 is the control center of the device. It can use various interfaces and circuits to connect all parts of the entire control device. By running or executing the instructions stored in the memory 220 and calling the data stored in the memory 220, various functions of the device and process data, so as to monitor the device as a whole.

[0149] In a possible design, the processor 210 may include one or more processing units. The processor 210 may integrate an application processor and a modem processor. Among them, the application processor mainly processes the operating system, the operating body interface, and application programs, etc., and the modem processor mainly processes wireless communication. It can be understood that the above-mentioned modem processor may not be integrated into the processor. In some embodiments, the processor 210 and the memory 220 can be implemented on the same chip or separately on independent chips.

[0150] The processor 210 may be a general-purpose processor, such as a central processing unit (CPU), a digital signal processor, an application-specific integrated circuit, a field-programmable gate array, or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, and can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present application. The general-purpose processor may be a microprocessor or any conventional processor, etc. The steps of the table editing method based on Element Plus disclosed in combination with the embodiments of the present application may be directly embodied as being executed by a hardware processor, or executed by a combination of hardware and software modules in the processor.

[0151] The memory 220, as a non-volatile computer-readable storage medium, can be used to store non-volatile software programs, non-volatile computer-executable programs, and modules. The memory 220 may include at least one type of storage medium, for example, it may include flash memory, a hard disk, a multimedia card, a card-type memory, a random access memory (RAM), a static random access memory (SRAM), a programmable read-only memory (PROM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a magnetic memory, a magnetic disk, an optical disk, etc. The memory 220 is any other medium that can be used to carry or store the desired program code in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory 220 in the embodiments of the present application may also be a circuit or any other device that can implement a storage function, for storing program instructions and / or data.

[0152] By programming the design of the processor 210, the code corresponding to the table editing method based on Element Plus introduced in the foregoing embodiments can be solidified into the chip, so that the chip can execute Figure 2 the steps of the table editing method based on Element Plus shown in the embodiments. How to program the design of the processor 210 is a well-known technology to those skilled in the art and will not be elaborated here.

[0153] The embodiments of the present application also provide a computer-readable storage medium. The computer-readable storage medium stores computer-executable instructions. When the computer-executable instructions are executed by the processor 210, they are used to implement the table editing method based on Element Plus described in any of the previous embodiments. Therefore, details will not be elaborated here. In addition, the beneficial effects of the same method will not be described again. For the technical details not disclosed in the embodiments of the computer storage medium involved in the present invention, please refer to the description of the method embodiments of the present invention.

[0154] In some possible implementation manners, various aspects of the table editing method based on Element Plus provided in the present application can also be implemented in the form of a program product, which includes program code. When the program product runs on a device, the program code is used to cause the control device to execute the steps in the table editing method based on Element Plus according to various exemplary embodiments of the present application described above in this specification.

[0155] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0156] The present application is described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each flow and / or block in the flowchart and / or block diagram, and the combination of flows and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing devices generate a device for implementing the specified functions in Figure 1 one or more of the processes Figure 1 or multiple processes and / or blocks

[0157] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory generate a manufactured article including an instruction device, and the instruction device implements the specified functions in Figure 1 one or more of the processes Figure 1 or multiple processes and / or blocks

[0158] These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus, so that a series of operation steps are performed on the computer or other programmable apparatus to produce a computer-implemented process, and thus the instructions executed on the computer or other programmable apparatus provide steps for implementing the processing described in the flow Figure 1 one process or a plurality of processes and / or blocks Figure 1 steps for implementing the functions specified in one block or a plurality of blocks.

[0159] In addition, any process or method description shown in the flowchart or described otherwise herein may be understood to represent a module, segment, or portion of code including one or more executable instructions for implementing a customized logic function or process, and the scope of the preferred embodiments of the present invention includes additional implementations, where functions may be performed in a substantially simultaneous manner or in an order opposite to that shown or discussed, according to the functions involved, which should be understood by those skilled in the art to which the embodiments of the present invention pertain.

[0160] Although the embodiments of the present invention have been shown and described above, it can be understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those of ordinary skill in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of the present invention.

Claims

1. A table editing method based on Element Plus, characterized in that: The steps include: Based on the Element Plus component library, a visual form is configured, wherein the visual form includes a plurality of data rows and a plurality of operation controls, wherein the operation controls correspond to the data rows one by one, and the operation controls include at least an edit instruction and a save instruction; Real-time capture of the operation of the operator triggering the editing command and the location information of the corresponding data row; If an operation of the operating body triggering an editing instruction is captured, the editing state of the cell in the data row is modified to an editable state according to the position information of the data row, and the editing state includes a non-editable state and an editable state; Acquire edit data input by the operator into a cell in the data row, and display the edit data in the cell in real time; Real-time capture of the operation of the operator triggering the save instruction; If an operation of the operator triggering a save instruction is captured, the data in the data row is saved to the server, and the current visual form is refreshed.

2. The table editing method based on Element Plus according to claim 1, characterized in that: Each data row in the visualization form has a switchable first page and a second page. When the data row is on the first page, an edit instruction is displayed on the data row; when the data row is on the second page, a save instruction is displayed on the data row, and an input box is displayed on a cell of the data row; The step of modifying the edit state of the cell in the data row to an editable state according to the position information of the data row if the operation of the operating body triggering the edit instruction is captured comprises: if the operation of the operating body triggering the edit instruction is captured, switching the data row corresponding to the position information from the first page to the second page according to the position information, and modifying the edit state of the cell in the data row to an editable state; The step of refreshing the current visual form includes: switching the data row from the second page to the first page, and displaying edited data in cells within the data row.

3. The table editing method based on Element Plus according to claim 2, characterized in that: The input box of the cell in the data row includes at least one of a text input box, a number input box, a drop-down box, a date selection box, and a cascade selection box.

4. The table editing method based on Element Plus according to claim 1, characterized in that: If the operation of the operating body triggering the editing instruction is captured, the step of modifying the editing state of the cell in the data row to an editable state according to the position information of the data row further includes the steps of: When the operation of the operator triggering the editing instruction is captured, the identity information of the operator is obtained; Determine the location of the data row and the identity authentication rule corresponding to the cell in the data row according to the location information; Determining whether the identity information of the operator complies with the identity authentication rule; If the identity information of the operator meets the identity rule, the edit state of the cell in the data row is changed from a non-editable state to an editable state; If the identity information of the operator does not conform to the identity rule, the editing state of the cell in the data row is maintained as a non-editable state.

5. The table editing method based on Element Plus according to claim 1, characterized in that: The step of acquiring the edit data input by the operator in the cell of the data row and displaying the edit data in real time in the cell comprises: Obtaining edit data input by an operator into a cell in the data row and a verification rule corresponding to the cell; Based on the verification rule, verify the edited data; If the edited data does not conform to the verification rules, a warning box pops up.

6. The table editing method based on Element Plus according to claim 1, characterized in that: If the operation of the operator triggering the save instruction is captured, the step of saving the data in the data row to the server and refreshing the current visual form includes: Obtaining the verification rules corresponding to the cells in the data row; Based on the verification rule, verifying the edit data input by the operator; If the edited data meets the verification rule, the edited data in the data row is saved to the server, and the visual form is refreshed; If the input data does not meet the verification rule, the save operation is not performed, and a warning box is popped up or the data in the current data unit is updated to the original data before editing.

7. The table editing method based on Element Plus according to claim 5 or 6, characterized in that: The verification rules include a first rule, a second rule and a third rule; the first rule is set to determine whether the cell is a required item; The second rule is set to determine whether the edit data input by the operator is a number; the third rule is set to determine whether the edit data input by the operator conforms to a preset value range.

8. The table editing method based on Element Plus according to claim 1, characterized in that: The table editing method based on Element Plus further comprises the following steps after the step of configuring a visual form based on the Element Plus component library: Real-time monitoring of whether the operator triggers the check command; If the operator triggers a check instruction, a check box is displayed on each row of data in the visual form; Get at least one row of data selected by the operator through the check box; Acquire operation instructions triggered by the operation body in real time, wherein the operation instructions include one or more combinations of batch deletion, batch export and batch editing; According to the operation instruction triggered by the operation body, a check operation is performed on at least one row of data selected by the operation body.

9. A table editing device based on Element Plus, characterized in that: include: A form configuration module, the form configuration module is used to configure a visual form based on the Element Plus component library, the visual form includes multiple data rows and multiple operation controls, the operation controls correspond to the data rows one by one, and the operation controls include at least an edit instruction and a save instruction; An instruction capture module, which is used to capture in real time the operation of the operator triggering the edit instruction and the position information of the corresponding data row, and can also be used to capture in real time the operation of the operator triggering the save instruction; A modification module, wherein the modification module is used to modify the editing state of the cell in the data row to an editable state according to the position information of the data row when capturing the operation of the operating body triggering the editing instruction, wherein the editing state includes a non-editable state and an editable state; A data display module, the data display module is used to obtain the edit data input by the operator in the cell in the data row, and display the edit data in real time in the cell; The data saving module is used to save the data in the data row to the server and refresh the current visual form when capturing the operation of the operator triggering the save instruction.

10. An electronic device, characterized in that: It comprises a processor and a memory, wherein the memory stores machine-readable instructions executable by the processor, and when the machine-readable instructions are executed by the processor, the steps in the table editing method based on Element Plus described in any one of claims 1 to 8 are performed.

Images