CN114169303A

CN114169303A - Form editing method, device, equipment and medium based on vue.js

Info

Publication number: CN114169303A
Application number: CN202111528588.4A
Authority: CN
Inventors: 路洋
Original assignee: Ping An Pension Insurance Corp
Current assignee: Ping An Pension Insurance Corp
Priority date: 2021-12-14
Filing date: 2021-12-14
Publication date: 2022-03-11

Abstract

The invention relates to the field of big data, and provides a table editing method, a table editing device, table editing equipment and a table editing medium based on vue.js, which can identify an array to be edited from table data according to a configuration file, perform rendering by using a rendering function in a vue.js frame to obtain a virtual table and an identifier of each cell, convert an original HTML structure into a virtual data structure, are clearer and easier to read and are convenient to operate, when the target cell has a click event, the attribute is switched to an editable state, data in the target cell is displayed based on an input component in the configuration component, the switching of the data editing attribute is further realized by combining the corresponding component and the monitoring of the event, the data can be directly edited at the front end without calling an interface of a rear-end server, the editing efficiency is effectively improved, and the operation burden of the system caused by transmitting the data to a background for multiple times is avoided. In addition, the invention also relates to a block chain technology, and the virtual table can be stored in the block chain node.

Description

Method, device, equipment and medium for editing table based on vue.js

Technical Field

The invention relates to the technical field of big data, in particular to a table editing method, a table editing device, table editing equipment and a table editing medium based on vue.

Background

The form, also called table, is a visual communication mode, is a means for organizing and organizing data, and is widely used in task scenes such as communication, scientific research, and data analysis.

However, the current UI (User Interface) framework has a single function, and most of them cannot be edited. To realize the function of editing the page table, data exchange with the background is required, and a background interface is frequently called, so that errors are easy to occur, the efficiency is low, and modification is inconvenient.

Disclosure of Invention

In view of the above, it is necessary to provide a method, an apparatus, a device and a medium for editing a table based on vue.

A vue.js-based table editing method, comprising:

acquiring table data and a configuration file, and identifying an array to be edited from the table data according to the configuration file;

calling a rendering function in a vue.js frame, and rendering the array to be edited by using the rendering function to obtain a virtual table and an identifier of each cell in the virtual table;

adding configuration events and configuration components to the virtual table according to the identification of each cell;

monitoring the configuration event of each cell;

when the configuration event with the cells is monitored to be a click event, determining the monitored cells as target cells;

and switching the attribute of the target cell into an editable state, and displaying the data in the target cell based on an input component in the configuration component.

According to a preferred embodiment of the present invention, the identifying the array to be edited from the table data according to the configuration file includes:

acquiring the category attribute of the data in each frame of the table data, and taking the category attribute as a first attribute;

acquiring a category attribute of pre-configured editable data from the configuration file, and using the category attribute as a second attribute;

and when the first attribute and the second attribute of the data in the sash are detected to be the same, combining the detected data to obtain the array to be edited.

According to a preferred embodiment of the present invention, the rendering the array to be edited by using the rendering function to obtain a virtual table and an identifier of each cell in the virtual table includes:

reserving the named slot of the array to be edited to obtain the virtual table;

acquiring each cell in the virtual table by adopting an acquisition function;

and circularly traversing each cell by using a mapping function, and adding an identifier for each traversed cell to obtain the identifier of each cell in the virtual table.

According to a preferred embodiment of the present invention, the adding a configuration event to the virtual table according to the identifier of each cell and the configuration component comprises:

acquiring the named slot corresponding to each cell;

inserting the configuration component into the named slot corresponding to each cell according to the identifier of each cell;

binding the configuration component and the configuration event in each named slot.

According to a preferred embodiment of the present invention, the configuration component further comprises an in-line tag component, the method further comprising:

determining the cells which do not monitor the configuration event as current cells;

maintaining the attributes of the current cell in a non-editable state and displaying the data in the current cell based on the component.

According to a preferred embodiment of the present invention, after the configuration event further includes an out-of-focus event and the property of the target cell is switched to an editable state, the method further includes:

when the configuration event of the target cell is monitored to be the out-of-focus event, saving data in the target cell;

and when all the cells in the editable state are detected to be edited, synchronizing the data in the virtual table to a back-end server.

According to a preferred embodiment of the present invention, after the attribute of the target cell is switched to the editable state, the method further comprises:

when detecting the row adding operation and/or the row deleting operation of the virtual table, traversing each row in the virtual table by adopting a circulation function, and adding a row identifier for each traversed row;

acquiring a row corresponding to the row adding operation and/or the row deleting operation as a target row;

when the row adding operation is executed, adding 1 to the row identifier of the target row, adding 1 to the identifier of each cell in the target row to obtain a row to be added, and adding the row to be added to the virtual table by adopting an adding function; or

And when the row deleting operation is executed, the length of the array in the target row is obtained, and when the length is greater than 1, a deleting function is adopted to delete the target row from the virtual table according to the row identifier of the target row.

A vue.js-based table editing apparatus comprising:

the system comprises an identification unit, a storage unit and a processing unit, wherein the identification unit is used for acquiring table data and a configuration file and identifying an array to be edited from the table data according to the configuration file;

the rendering unit is used for calling a rendering function in the vue.js frame and rendering the array to be edited by using the rendering function to obtain a virtual table and an identifier of each cell in the virtual table;

the adding unit is used for adding configuration events and configuration components to the virtual table according to the identification of each cell;

the monitoring unit is used for monitoring the configuration event of each cell;

the determining unit is used for determining the monitored cells as target cells when the configuration events with the cells are monitored as click events;

and the display unit is used for switching the attribute of the target cell into an editable state and displaying the data in the target cell based on the input component in the configuration component.

A computer device, the computer device comprising:

a memory storing at least one instruction; and

a processor executing instructions stored in the memory to implement the vue.js-based table editing method.

A computer-readable storage medium having stored therein at least one instruction for execution by a processor in a computer device to implement the vue.

It can be seen from the above technical solutions that the present invention can obtain table data and a configuration file, identify an array to be edited from the table data according to the configuration file, call a rendering function in a vue.js frame, render the array to be edited by using the rendering function, obtain a virtual table and an identifier of each cell in the virtual table, convert an original HTML structure into a virtual data structure by using the rendering function in the vue.js frame, are more clear and readable in a code structure, are more convenient to operate on a front-end interface, add a configuration event and a configuration component to the virtual table according to the identifier of each cell, monitor the configuration event of each cell, determine a monitored cell as a target cell when the configuration event having a cell is monitored as a click event, and switch an attribute of the target cell into an editable state, and the data in the target cell is displayed based on the input component in the configuration component, the switching of the data editing attribute is further realized by combining the corresponding component and the monitoring of the event, the data can be directly edited at the front end without calling an interface of a rear-end server, the editing efficiency is effectively improved, and the operation burden of transmitting the data to a background for many times to a system is avoided.

Drawings

Js-based table editing method of the present invention is illustrated in fig. 1, which is a flow chart of a preferred embodiment of the present invention.

Js-based table editing apparatus fig. 2 is a functional block diagram of a preferred embodiment of the present invention.

Fig. 3 is a schematic structural diagram of a computer device according to a preferred embodiment of the present invention, which implements a vue.js-based table editing method.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention will be described in detail with reference to the accompanying drawings and specific embodiments.

Js table editing method as shown in fig. 1, is a flow chart of the preferred embodiment of the table editing method based on vue. The order of the steps in the flow chart may be changed and some steps may be omitted according to different needs.

The table editing method based on vue.js is applied to one or more computer devices, which are devices capable of automatically performing numerical calculation and/or information processing according to preset or stored instructions, and the hardware thereof includes, but is not limited to, a microprocessor, an Application Specific Integrated Circuit (ASIC), a Programmable Gate Array (FPGA), a Digital Signal Processor (DSP), an embedded device, and the like.

The computer device may be any electronic product capable of performing human-computer interaction with a user, for example, a Personal computer, a tablet computer, a smart phone, a Personal Digital Assistant (PDA), a game machine, an interactive web Television (IPTV), an intelligent wearable device, and the like.

The computer device may also include a network device and/or a user device. The network device includes, but is not limited to, a single network server, a server group consisting of a plurality of network servers, or a Cloud Computing (Cloud Computing) based Cloud consisting of a large number of hosts or network servers.

The server may be an independent server, or may be a cloud server that provides basic cloud computing services such as a cloud service, a cloud database, cloud computing, a cloud function, cloud storage, a Network service, cloud communication, a middleware service, a domain name service, a security service, a Content Delivery Network (CDN), a big data and artificial intelligence platform, and the like.

Among them, Artificial Intelligence (AI) is a theory, method, technique and application system that simulates, extends and expands human Intelligence using a digital computer or a machine controlled by a digital computer, senses the environment, acquires knowledge and uses the knowledge to obtain the best result.

The artificial intelligence infrastructure generally includes technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a robot technology, a biological recognition technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and the like.

The Network in which the computer device is located includes, but is not limited to, the internet, a wide area Network, a metropolitan area Network, a local area Network, a Virtual Private Network (VPN), and the like.

S10, obtaining table data and a configuration file, and identifying an array to be edited from the table data according to the configuration file.

In at least one embodiment of the invention, the tabular data may be any form of tabular data, such as a web page table or the like.

In at least one embodiment of the present invention, the identifying the array to be edited from the table data according to the configuration file includes:

It is understood that not all data in a table may be required for editing, such as headers, etc. If these data are also configured to be editable, data errors may result due to malfunctions.

In the embodiment, the array to be edited is screened out from the table data according to the actual editing requirement so as to carry out targeted configuration, and the generation of editing errors can be effectively avoided.

And S11, calling a rendering function in the vue.js frame, and rendering the array to be edited by using the rendering function to obtain a virtual table and the identifier of each cell in the virtual table.

Wherein the rendering function is a render function.

The present embodiment uses the componentization idea of the vue.js frame to support single-line and multi-line editing, and can automatically save data after editing, thereby realizing simple linkage between controls, and simplifying editing of table data.

In at least one embodiment of the present invention, the rendering the array to be edited by using the rendering function to obtain a virtual table and an identifier of each cell in the virtual table includes:

reserving the named slot of the array to be edited to obtain the virtual table;

acquiring each cell in the virtual table by adopting an acquisition function;

In one embodiment, the obtaining function is a this function, the mapping function is a map function, and each cell has a unique identifier.

It can be understood that, since the original table data cannot be directly modified or edited, the present embodiment adds attributes to each cell in a rendering manner, so as to subsequently and directly implement editing on the virtual table structure.

Through the implementation mode, the original HTML (Hypertext Markup Language) structure can be converted into a virtual data structure by using the rendering function in the vue.js frame, so that the code structure is clearer and easier to read, and the operation is more convenient on a front-end interface.

Of course, in other embodiments, the render function may be generated by writing a single file of vue and using an HTML structure, but this approach does not have the high controllability of the render function, in contrast, the render function may manipulate elements more precisely and also more closely to the compiler.

S12, adding configuration events and configuration components to the virtual table according to the identification of each cell.

Specifically, the adding a configuration event and a configuration component to the virtual table according to the identifier of each cell includes:

acquiring the named slot corresponding to each cell;

In the above embodiment, the corresponding event and component are added, so that the event is thrown in the corresponding component, and the relevant operation is performed in the event callback function.

S13, monitoring the configuration event of each cell.

For example: when it is monitored that a click event is generated on a cell, determining that the configuration event is monitored on the cell.

Or when the cell is monitored to generate the out-of-focus event, determining that the configuration event is monitored on the cell.

And S14, when the configuration event with the cells is monitored to be a click event, determining the monitored cells as target cells.

In this embodiment, when it is monitored that a cell is clicked, it is determined that the click event is monitored on the cell.

Specifically, the click event may include, but is not limited to, any of the following forms:

click operation, touch operation, long press operation, and slide operation.

In at least one embodiment of the present invention, the configuration component further comprises an inline tag component, which in an implementation is a span component, for displaying data, and the method further comprises:

and keeping the attribute of the current cell in a non-editable state, and displaying the data in the current cell based on the span component.

It should be noted that the original edit attribute of each cell is false, that is, the non-editable state, so that when the configuration event is not monitored on a cell, the original edit attribute of the corresponding cell may be kept unchanged, so as to implement protection on data in the corresponding cell.

And S15, switching the attribute of the target cell into an editable state, and displaying the data in the target cell based on the input component in the configuration component.

In one embodiment, the input component is an input component, which is used to edit data.

For example: and when the editing attribute of the target cell is determined to be required to be modified into the editable state, switching the original edge attribute false to true so as to realize switching between functions of displaying data and editing data. And further, displaying the data in the target cell based on the input component for a user to edit and modify.

Through the embodiment, the data are structurally rendered based on the vue.js frame to form a virtual data structure, the switching of data editing attributes is further realized by combining the corresponding components and monitoring of events, the data can be directly edited at the front end without calling an interface of a rear-end server, the editing efficiency is effectively improved, and the operation burden of the system caused by transmitting the data to the background for many times is avoided.

In at least one embodiment of the present invention, the configuration event further includes an out-of-focus event, and after the attribute of the target cell is switched to the editable state, the method further includes:

For example: when a loss of a cursor on the target cell is detected, it may be determined that the out-of-focus event was heard on the target cell.

Through the embodiment, the events can be automatically monitored and the data can be automatically stored, so that the user operation is simplified, meanwhile, an interface is not required to be repeatedly called to transmit data to the back-end server, and the editing efficiency is further improved.

In at least one embodiment of the present invention, after switching the attribute of the target cell to an editable state, the method further comprises:

when detecting the operation of adding and/or deleting rows to the virtual table, traversing each row in the virtual table by adopting a cyclic function (v-for function), and adding a row identifier to each traversed row;

when the row adding operation is executed, adding 1 to the row identifier of the target row, adding 1 to the identifier of each cell in the target row to obtain a row to be added, and adding the row to be added to the virtual table by adopting an adding function (push function); or

In the embodiment, dynamic addition and deletion of data in the table can be realized simultaneously in the editing process, and the editability of the table is further optimized.

It should be noted that, in order to further improve the security of the data and avoid malicious tampering of the data, the virtual table may be stored in the blockchain node.

Js-based table editing apparatus according to the present invention, as shown in fig. 2, is a functional block diagram of a preferred embodiment. Js-based table editing apparatus 11 includes a recognition unit 110, a rendering unit 111, an adding unit 112, a listening unit 113, a determining unit 114, and a display unit 115. The module/unit referred to in the present invention refers to a series of computer program segments that can be executed by the processor 13 and that can perform a fixed function, and that are stored in the memory 12. In the present embodiment, the functions of the modules/units will be described in detail in the following embodiments.

The identification unit 110 obtains table data and a configuration file, and identifies an array to be edited from the table data according to the configuration file.

In at least one embodiment of the present invention, the identifying unit 110 identifies the array to be edited from the table data according to the configuration file includes:

The rendering unit 111 calls a rendering function in the vue.js frame, and renders the array to be edited by using the rendering function to obtain a virtual table and an identifier of each cell in the virtual table.

Wherein the rendering function is a render function.

In at least one embodiment of the present invention, the rendering unit 111 renders the array to be edited by using the rendering function, and obtaining the virtual table and the identifier of each cell in the virtual table includes:

reserving the named slot of the array to be edited to obtain the virtual table;

acquiring each cell in the virtual table by adopting an acquisition function;

The adding unit 112 adds configuration events and configuration components to the virtual table according to the identification of each cell.

Specifically, the adding unit 112 adds the configuration event and the configuration component to the virtual table according to the identifier of each cell, including:

acquiring the named slot corresponding to each cell;

The listening unit 113 listens for the configuration event of each cell.

When the configuration event in which the cell is listened to is a click event, the determining unit 114 determines the listened cell as a target cell.

click operation, touch operation, long press operation, and slide operation.

In at least one embodiment of the present invention, the configuration component further includes an in-line tag component, where the in-line tag component is a span component, and is configured to display data, and determine a cell that does not monitor the configuration event as a current cell;

The display unit 115 switches the attribute of the target cell to an editable state and displays data in the target cell based on the input component in the configuration component.

In at least one embodiment of the present invention, the configuration event further includes a focus lost event, and after the attribute of the target cell is switched to an editable state, when it is monitored that the configuration event of the target cell is the focus lost event, data in the target cell is saved;

In at least one embodiment of the present invention, after the attribute of the target cell is switched to the editable state, when detecting an add-line operation and/or a delete-line operation on the virtual table, traversing each line in the virtual table by using a round-robin function (v-for function), and adding a line identifier to each traversed line;

It can be seen from the above technical solutions that the present invention can obtain table data and a configuration file, identify an array to be edited from the table data according to the configuration file, call a rendering function in a vue.js frame, render the array to be edited by using the rendering function, obtain a virtual table and an identifier of each cell in the virtual table, convert an original HTML structure into a virtual data structure by using the rendering function in the vue.js frame, are more clear and readable in a code structure, are more convenient to operate on a front-end interface, add a configuration event and a configuration component to the virtual table according to the identifier of each cell, monitor the configuration event of each cell, determine a monitored cell as a target cell when the configuration event having a cell is monitored as a click event, and switch an attribute of the target cell into an editable state, and the data in the target cell is displayed based on an input component in the configuration component, the switching of data editing attributes is further realized by combining the corresponding components and the monitoring of events, the data can be directly edited at the front end without calling an interface of a rear-end server, the editing efficiency is effectively improved, and the operation burden of the system caused by transmitting the data to the background for many times is avoided.

Fig. 3 is a schematic structural diagram of a computer device according to a preferred embodiment of the present invention, which implements a table editing method based on vue.

The computer device 1 may comprise a memory 12, a processor 13 and a bus, and may further comprise a computer program, such as a table editor program based on vue.

It will be understood by those skilled in the art that the schematic diagram is merely an example of the computer device 1, and does not constitute a limitation to the computer device 1, the computer device 1 may have a bus-type structure or a star-shaped structure, the computer device 1 may further include more or less other hardware or software than those shown, or different component arrangements, for example, the computer device 1 may further include an input and output device, a network access device, etc.

It should be noted that the computer device 1 is only an example, and other electronic products that are currently available or may come into existence in the future, such as electronic products that can be adapted to the present invention, should also be included in the scope of the present invention, and are included herein by reference.

The memory 12 includes at least one type of readable storage medium, which includes flash memory, removable hard disks, multimedia cards, card-type memory (e.g., SD or DX memory, etc.), magnetic memory, magnetic disks, optical disks, etc. The memory 12 may in some embodiments be an internal storage unit of the computer device 1, for example a removable hard disk of the computer device 1. The memory 12 may also be an external storage device of the computer device 1 in other embodiments, such as a plug-in removable hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), etc. provided on the computer device 1. Further, the memory 12 may also include both an internal storage unit and an external storage device of the computer device 1. The memory 12 can be used not only for storing application software installed in the computer device 1 and various types of data such as codes of a table editing program based on vue.

The processor 13 may be composed of an integrated circuit in some embodiments, for example, a single packaged integrated circuit, or may be composed of a plurality of integrated circuits packaged with the same or different functions, including one or more Central Processing Units (CPUs), microprocessors, digital Processing chips, graphics processors, and combinations of various control chips. The processor 13 is a Control Unit (Control Unit) of the computer device 1, connects various components of the entire computer device 1 by using various interfaces and lines, and executes various functions and processes data of the computer device 1 by running or executing programs or modules (for example, executing a table editing program based on vue.

The processor 13 executes the operating system of the computer device 1 and various installed application programs. The processor 13 executes the application program to implement the steps in each of the above-described vue.js-based table editing method embodiments, such as the steps shown in fig. 1.

Illustratively, the computer program may be divided into one or more modules/units, which are stored in the memory 12 and executed by the processor 13 to accomplish the present invention. The one or more modules/units may be a series of computer readable instruction segments capable of performing certain functions, which are used to describe the execution of the computer program in the computer device 1. For example, the computer program may be divided into a recognition unit 110, a rendering unit 111, an adding unit 112, a listening unit 113, a determining unit 114, a display unit 115.

The integrated unit implemented in the form of a software functional module may be stored in a computer-readable storage medium. The software functional module is stored in a storage medium and includes several instructions to enable a computer device (which may be a personal computer, a computer device, or a network device) or a processor (processor) to execute parts of the vue.js-based table editing method according to the embodiments of the present invention.

The integrated modules/units of the computer device 1 may be stored in a computer-readable storage medium if they are implemented in the form of software functional units and sold or used as separate products. Based on such understanding, all or part of the flow of the method according to the embodiments of the present invention may be implemented by a computer program, which may be stored in a computer-readable storage medium, and when the computer program is executed by a processor, the steps of the method embodiments may be implemented.

Wherein the computer program comprises computer program code, which may be in the form of source code, object code, an executable file or some intermediate form, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, U-disk, removable hard disk, magnetic disk, optical disk, computer Memory, Read-Only Memory (ROM), random-access Memory, or the like.

Further, the computer-readable storage medium may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program required for at least one function, and the like; the storage data area may store data created according to the use of the blockchain node, and the like.

The block chain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, a consensus mechanism, an encryption algorithm and the like. A block chain (Blockchain), which is essentially a decentralized database, is a series of data blocks associated by using a cryptographic method, and each data block contains information of a batch of network transactions, so as to verify the validity (anti-counterfeiting) of the information and generate a next block. The blockchain may include a blockchain underlying platform, a platform product service layer, an application service layer, and the like.

The bus may be a Peripheral Component Interconnect (PCI) bus, an Extended Industry Standard Architecture (EISA) bus, or the like. The bus may be divided into an address bus, a data bus, a control bus, etc. For ease of illustration, only one line is shown in FIG. 3, but this does not mean only one bus or one type of bus. The bus is arranged to enable connection communication between the memory 12 and at least one processor 13 or the like.

Although not shown, the computer device 1 may further include a power supply (such as a battery) for supplying power to each component, and preferably, the power supply may be logically connected to the at least one processor 13 through a power management device, so that functions of charge management, discharge management, power consumption management and the like are realized through the power management device. The power supply may also include any component of one or more dc or ac power sources, recharging devices, power failure detection circuitry, power converters or inverters, power status indicators, and the like. The computer device 1 may further include various sensors, a bluetooth module, a Wi-Fi module, and the like, which are not described herein again.

Further, the computer device 1 may further include a network interface, and optionally, the network interface may include a wired interface and/or a wireless interface (such as a WI-FI interface, a bluetooth interface, etc.), which are generally used for establishing a communication connection between the computer device 1 and other computer devices.

Optionally, the computer device 1 may further comprise a user interface, which may be a Display (Display), an input unit, such as a Keyboard (Keyboard), and optionally a standard wired interface, a wireless interface. Alternatively, in some embodiments, the display may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, or the like. The display, which may also be referred to as a display screen or display unit, is suitable for displaying information processed in the computer device 1 and for displaying a visualized user interface.

It is to be understood that the described embodiments are for purposes of illustration only and that the scope of the appended claims is not limited to such structures.

Fig. 3 shows only the computer device 1 with the components 12-13, and it will be understood by a person skilled in the art that the structure shown in fig. 3 does not constitute a limitation of the computer device 1 and may comprise fewer or more components than shown, or a combination of certain components, or a different arrangement of components.

In connection with fig. 1, the memory 12 in the computer device 1 stores a plurality of instructions to implement a vue.js-based table editing method, and the processor 13 can execute the plurality of instructions to implement:

monitoring the configuration event of each cell;

Specifically, the processor 13 may refer to the description of the relevant steps in the embodiment corresponding to fig. 1 for a specific implementation method of the instruction, which is not described herein again.

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 modules is only one logical functional division, and other divisions may be realized in practice.

The invention is operational with numerous general purpose or special purpose computing system environments or configurations. For example: personal computers, server computers, hand-held or portable devices, tablet-type devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like. The invention may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The invention may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The modules described as separate parts may or may not be physically separate, and parts displayed as modules may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the present embodiment.

In addition, functional modules 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 integrated unit can be realized in a form of hardware, or in a form of hardware plus a software functional module.

It will be evident to those skilled in the art that the invention is not limited to the details of the foregoing illustrative embodiments, and that the present invention may be embodied in other specific forms without departing from the spirit or essential attributes thereof.

The present embodiments are therefore to be considered in all respects as illustrative and not restrictive, the scope of the invention being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference signs in the claims shall not be construed as limiting the claim concerned.

Furthermore, it is obvious that the word "comprising" does not exclude other elements or steps, and the singular does not exclude the plural. A plurality of units or means recited in the present invention may also be implemented by one unit or means through software or hardware. The terms first, second, etc. are used to denote names, but not any particular order.

Finally, it should be noted that the above embodiments are only for illustrating the technical solutions of the present invention and not for limiting, and although the present invention is described in detail with reference to the preferred embodiments, it should be understood by those skilled in the art that modifications or equivalent substitutions may be made on the technical solutions of the present invention without departing from the spirit and scope of the technical solutions of the present invention.

Claims

1. a table editing method based on vue.js, is characterized in that, described table editing method based on vue.js comprises:

Obtain table data and a configuration file, and identify an array to be edited from the table data according to the configuration file;

Call the rendering function in the vue.js framework, and use the rendering function to render the array to be edited to obtain a virtual table and the identifier of each cell in the virtual table;

Add configuration events and configuration components to the virtual table according to the identification of each cell;

Listen to the configuration event of each cell;

When it is detected that the configuration event of the cell is a click event, the monitored cell is determined as the target cell;

The property of the target cell is switched to an editable state, and the data in the target cell is displayed based on the input component in the configuration component.

2. The form editing method based on vue.js according to claim 1, wherein the identifying the array to be edited from the form data according to the configuration file comprises:

Obtain the category attribute of the data in each frame of the table data, and use it as the first attribute;

Obtain the category attribute of the pre-configured editable data from the configuration file and use it as the second attribute;

When it is detected that the first attribute of the data in the frame is the same as the second attribute, the detected data is combined to obtain the to-be-edited array.

3. The table editing method based on vue.js as claimed in claim 1, wherein the rendering function is used to render the to-be-edited array to obtain a virtual table and each unit in the virtual table Grid identifiers include:

Retain the named slot of the to-be-edited array to obtain the virtual table;

Use an acquisition function to acquire each cell in the virtual table;

The mapping function is used to traverse each cell in a loop, and an identifier is added to each traversed cell to obtain the identifier of each cell in the virtual table.

4. the table editing method based on vue.js as claimed in claim 3, it is characterized in that, described according to the identification of each cell to add configuration event and configuration component to described virtual table comprises:

Get the named slot corresponding to each cell;

Insert the configuration component into the named slot corresponding to each cell according to the identifier of each cell;

The configuration component and the configuration event are bound in each named slot.

5. The table editing method based on vue.js as claimed in claim 1, wherein the configuration component further comprises an inline label component, and the method further comprises:

Determine the cell that has not listened to the configuration event as the current cell;

Keep the properties of the current cell in an uneditable state, and display the data in the current cell based on the inline label component.

6. The table editing method based on vue.js according to claim 1, characterized in that, after the configuration event also includes a loss of focus event, after the attribute of the target cell is switched to an editable state, The method also includes:

When listening to the configuration event of the target cell as the loss of focus event, save the data in the target cell;

When it is detected that all the cells in the editable state have been edited, the data in the virtual table is synchronized to the backend server.

7. The vue.js-based table editing method according to claim 1, wherein after the attribute of the target cell is switched to an editable state, the method further comprises:

When detecting an operation of adding a row and/or deleting a row to the virtual table, use a loop function to traverse each row in the virtual table, and add a row identifier to each row traversed;

Obtain the row corresponding to the row adding operation and/or the row deleting operation as the target row;

When performing the operation of adding a row, add 1 to the row identifier of the target row, and add 1 to the identifier of each cell in the target row to obtain the row to be added, and use the add function to add the row to be added. rows are added to the virtual table; or

When the delete row operation is performed, the length of the array in the target row is obtained, and when the length is greater than 1, the delete function is used to delete the target row from the virtual table according to the row identifier of the target row .

8. A table editing device based on vue.js, wherein the table editing device based on vue.js comprises:

an identification unit, used for obtaining table data and a configuration file, and identifying an array to be edited from the table data according to the configuration file;

A rendering unit, used to call the rendering function in the vue.js framework, and use the rendering function to render the array to be edited to obtain a virtual table and the identifier of each cell in the virtual table;

adding a unit for adding configuration events and configuration components to the virtual table according to the identifier of each cell;

a monitoring unit for monitoring the configuration event of each cell;

Determining the cell, for determining the monitored cell as the target cell when the configuration event of the cell is monitored as a click event;

A display unit, configured to switch the attribute of the target cell to an editable state, and display the data in the target cell based on the input component in the configuration component.

9. A computer device, characterized in that the computer device comprises:

a memory that stores at least one instruction; and

The processor executes the instructions stored in the memory to implement the vue.js-based table editing method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: at least one instruction is stored in the computer-readable storage medium, and the at least one instruction is executed by a processor in a computer device to implement the method as claimed in claims 1 to 7 Any one of the table editing methods based on vue.js.