CN114169303A - Method, device, equipment and medium for editing table based on vue.js - Google Patents
Method, device, equipment and medium for editing table based on vue.js Download PDFInfo
- Publication number
- CN114169303A CN114169303A CN202111528588.4A CN202111528588A CN114169303A CN 114169303 A CN114169303 A CN 114169303A CN 202111528588 A CN202111528588 A CN 202111528588A CN 114169303 A CN114169303 A CN 114169303A
- Authority
- CN
- China
- Prior art keywords
- cell
- data
- configuration
- row
- attribute
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000009877 rendering Methods 0.000 claims abstract description 50
- 238000012544 monitoring process Methods 0.000 claims abstract description 14
- 230000006870 function Effects 0.000 claims description 85
- 238000012545 processing Methods 0.000 claims description 8
- 238000013507 mapping Methods 0.000 claims description 6
- 238000005516 engineering process Methods 0.000 abstract description 9
- 238000004590 computer program Methods 0.000 description 10
- 238000004891 communication Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 5
- 238000007726 management method Methods 0.000 description 5
- 238000013473 artificial intelligence Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 238000013459 approach Methods 0.000 description 2
- 238000012217 deletion Methods 0.000 description 2
- 230000037430 deletion Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000007257 malfunction Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 125000004122 cyclic group Chemical group 0.000 description 1
- 238000007405 data analysis Methods 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013135 deep learning Methods 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 238000003058 natural language processing Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
- G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Health & Medical Sciences (AREA)
- Artificial Intelligence (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- User Interface Of Digital Computer (AREA)
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
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:
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.
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;
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.
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;
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.
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:
determining the cells which do not monitor the configuration event as current cells;
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:
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.
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;
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 (push 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.
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.
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.
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 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 unit 110 identifies 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.
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.
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.
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 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;
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.
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.
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;
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.
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.
The listening unit 113 listens for 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.
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.
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 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;
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.
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 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 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;
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.
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 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;
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 (push 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.
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.
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:
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.
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 (10)
1. A method for editing a table based on vue.js, the 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.
2. Js-based form editing method according to claim 1, wherein the identifying an array to be edited from the form data according to the configuration file comprises:
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.
3. The value-js-based table editing method according to claim 1, wherein 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.
4. Js-based form editing method according to claim 3, wherein said adding configuration events and configuration components to said virtual form according to the identity of each cell 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.
5. Js-based table editing method according to claim 1, wherein the configuration component further comprises an in-line label 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 data in the current cell based on the in-line tab component.
6. Js-based table editing method according to claim 1, wherein after switching the property of the target cell to an editable state from the configuration event further comprising an out-of-focus event, the method further comprises:
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.
7. Js-based table editing method according to claim 1, wherein after switching the attribute of the target cell to an 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.
8. 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.
9. A computer device, characterized in that the computer device comprises:
a memory storing at least one instruction; and
a processor executing instructions stored in the memory to implement a vue.js-based table editing method as claimed in any one of claims 1 to 7.
10. A computer-readable storage medium characterized by: the computer-readable storage medium having stored therein at least one instruction for execution by a processor in a computer device to implement a vue.js-based table editing method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111528588.4A CN114169303A (en) | 2021-12-14 | 2021-12-14 | Method, device, equipment and medium for editing table based on vue.js |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111528588.4A CN114169303A (en) | 2021-12-14 | 2021-12-14 | Method, device, equipment and medium for editing table based on vue.js |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114169303A true CN114169303A (en) | 2022-03-11 |
Family
ID=80486504
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111528588.4A Pending CN114169303A (en) | 2021-12-14 | 2021-12-14 | Method, device, equipment and medium for editing table based on vue.js |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114169303A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116127936A (en) * | 2023-04-04 | 2023-05-16 | 深圳市城市交通规划设计研究中心股份有限公司 | Method for compiling engineering unit matrix diagram, electronic equipment and storage medium |
| CN116302294A (en) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107273369A (en) * | 2016-04-06 | 2017-10-20 | 阿里巴巴集团控股有限公司 | A kind of table data modification method and device |
| CN108804483A (en) * | 2017-05-05 | 2018-11-13 | 平安科技（深圳）有限公司 | Rendering intent, server and the computer readable storage medium of the cell page |
| CN108804946A (en) * | 2018-06-12 | 2018-11-13 | 成都优易数据有限公司 | A kind of table button authority control method based on Vue.js |
| CN109857742A (en) * | 2019-01-18 | 2019-06-07 | 烽火通信科技股份有限公司 | A kind of big data virtual tables fast display method and system |
| CN111819534A (en) * | 2017-12-03 | 2020-10-23 | 托马斯·斯塔胡拉 | Spreadsheet-based software application development |
| CN111859874A (en) * | 2019-04-17 | 2020-10-30 | 百度在线网络技术（北京）有限公司 | Table generating method and system, video playing device and computer readable medium |
| CN111859883A (en) * | 2020-07-23 | 2020-10-30 | 北京字节跳动网络技术有限公司 | Program table creating method and device and electronic equipment |
| CN111898049A (en) * | 2020-06-16 | 2020-11-06 | 广州市玄武无线科技股份有限公司 | Table implementation method and device, computer terminal equipment and storage medium |
| CN112506493A (en) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | Table configuration method, device, equipment and medium based on vue |
-
2021
- 2021-12-14 CN CN202111528588.4A patent/CN114169303A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107273369A (en) * | 2016-04-06 | 2017-10-20 | 阿里巴巴集团控股有限公司 | A kind of table data modification method and device |
| CN108804483A (en) * | 2017-05-05 | 2018-11-13 | 平安科技（深圳）有限公司 | Rendering intent, server and the computer readable storage medium of the cell page |
| CN111819534A (en) * | 2017-12-03 | 2020-10-23 | 托马斯·斯塔胡拉 | Spreadsheet-based software application development |
| CN108804946A (en) * | 2018-06-12 | 2018-11-13 | 成都优易数据有限公司 | A kind of table button authority control method based on Vue.js |
| CN109857742A (en) * | 2019-01-18 | 2019-06-07 | 烽火通信科技股份有限公司 | A kind of big data virtual tables fast display method and system |
| CN111859874A (en) * | 2019-04-17 | 2020-10-30 | 百度在线网络技术（北京）有限公司 | Table generating method and system, video playing device and computer readable medium |
| CN111898049A (en) * | 2020-06-16 | 2020-11-06 | 广州市玄武无线科技股份有限公司 | Table implementation method and device, computer terminal equipment and storage medium |
| CN111859883A (en) * | 2020-07-23 | 2020-10-30 | 北京字节跳动网络技术有限公司 | Program table creating method and device and electronic equipment |
| CN112506493A (en) * | 2020-10-30 | 2021-03-16 | 福建亿能达信息技术股份有限公司 | Table configuration method, device, equipment and medium based on vue |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116127936A (en) * | 2023-04-04 | 2023-05-16 | 深圳市城市交通规划设计研究中心股份有限公司 | Method for compiling engineering unit matrix diagram, electronic equipment and storage medium |
| CN116302294A (en) * | 2023-05-18 | 2023-06-23 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
| CN116302294B (en) * | 2023-05-18 | 2023-09-01 | 安元科技股份有限公司 | Method and system for automatically identifying component attribute through interface |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN114169303A (en) | Method, device, equipment and medium for editing table based on vue.js | |
| CN112559535B (en) | Multithreading-based asynchronous task processing method, device, equipment and medium | |
| CN111797351A (en) | Page data management method and device, electronic equipment and medium | |
| CN115048111B (en) | Code generation method, device, equipment and medium based on metadata | |
| CN110825731A (en) | Data storage method and device, electronic equipment and storage medium | |
| CN115408399A (en) | Blood relationship analysis method, device, equipment and storage medium based on SQL script | |
| CN113806434A (en) | Big data processing method, device, equipment and medium | |
| CN113282854A (en) | Data request response method and device, electronic equipment and storage medium | |
| CN116755637B (en) | Transaction data storage method, device, equipment and medium | |
| CN113886204A (en) | User behavior data collection method and device, electronic equipment and readable storage medium | |
| CN115314570B (en) | Data issuing method, device, equipment and medium based on protocol development framework | |
| CN114816371B (en) | Message processing method, device, equipment and medium | |
| CN111625236A (en) | Front-end development method and device based on componentization, electronic equipment and storage medium | |
| CN111046085A (en) | Data source tracing processing method and device, medium and equipment | |
| CN114185776A (en) | Big data point burying method, device, equipment and medium for application program | |
| CN114675976A (en) | GPU sharing method, device, equipment and medium based on kubernets | |
| CN114611046A (en) | Data loading method, device, equipment and medium | |
| CN114090392A (en) | Page browsing time duration statistical method and device, electronic equipment and storage medium | |
| CN109828885B (en) | RocketMQ memory monitoring method and device, electronic equipment and storage medium | |
| CN113065086A (en) | Webpage text extraction method and device, electronic equipment and storage medium | |
| CN112051952A (en) | Picture dynamic browsing method and device, electronic equipment and readable storage medium | |
| CN113127574A (en) | Service data display method, system, equipment and medium based on knowledge graph | |
| CN112613287A (en) | Data list display method, device, equipment and storage medium | |
| CN112559940B (en) | Page labeling method, device, equipment and medium | |
| CN112307771A (en) | Course analysis method, device, equipment and medium based on emotion analysis |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |