CN109933321A - Table display method and device, storage medium based on Vue frame - Google Patents
Table display method and device, storage medium based on Vue frame Download PDFInfo
- Publication number
- CN109933321A CN109933321A CN201910044506.5A CN201910044506A CN109933321A CN 109933321 A CN109933321 A CN 109933321A CN 201910044506 A CN201910044506 A CN 201910044506A CN 109933321 A CN109933321 A CN 109933321A
- Authority
- CN
- China
- Prior art keywords
- component
- sub
- frame
- data
- table field
- 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
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
This application discloses a kind of table display method based on Vue frame and device, storage medium, computer equipments, are related to technical field of information processing.Wherein method includes: building parent component and sub-component；The form data for obtaining target table, is written parent component for form data, form data includes list data and table field；Form data in parent component is sent to sub-component；The table field in sub-component is traversed, the table field that will acquire is assigned to multiselect frame；User is received to the selection operation of multiselect frame, determines the table field of user's concern；According to the table field in the table field change sub-component of user's concern；Region displaying target table is specified in the page according to the sub-component after change.The application can't trigger the access to background data base when user's operation multiselect frame, reduce the access pressure of background data base.
Description
Technical field
This application involves technical field of information processing, particularly with regard to a kind of table display method based on Vue frame
And device, storage medium, computer equipment.
Background technique
Many systems front end exploitation in, need to show the table in back-end data base, when table column very
In the case where more, user wishes the field for only showing oneself concern.In existing table display method, in order to realize to partial words
The display of section, is provided with multiselect frame on the page, includes all fields in table in multiselect frame, and user can be set by multiselect frame
Set the field of oneself concern.
However, existing table display method needs to access database respectively for list data and multiselect frame field.When
When user does not operate multiselect frame field, the corresponding data of table whole field in reading database, and default display table
The corresponding data of whole field in lattice.When user by multiselect frame select oneself pay close attention to field after, can read in database
The corresponding data of respective field are simultaneously shown.Obviously, if user's frequent operation multiselect frame will increase the access pressure of database.
Summary of the invention
In view of this, this application provides it is a kind of by the table display method of Vue frame and device, storage medium, based on
Machine equipment is calculated, main purpose is that solution prior art user frequent operation multiselect frame will increase asking for the access pressure of database
Topic.
According to the one aspect of the application, a kind of table display method based on Vue frame is provided, this method comprises:
Construct parent component and sub-component；
The parent component is written, wherein the form data in the form data by the form data for obtaining target table
Including list data and table field；
Form data in the parent component is sent to the sub-component, so that preserving in the sub-component described
Form data；
The table field in the sub-component is traversed, the table field that will acquire is assigned to multiselect frame；
User is received to the selection operation of multiselect frame, the table field of user's concern is determined, is closed according to the user
The table field of note changes the table field in the sub-component；
Region is specified to show the target table in the page according to the sub-component after change.
Optionally, the parent component and sub-component, which define, binary array and unitary array；
It is described that the parent component is written into the list data and table field, comprising:
The parent component is written in the table field by the binary array that the list data is written to the parent component
Unitary array.
Optionally, the data by the parent component are sent to the sub-component, comprising:
The form data in the parent component is sent to the sub-component by data transmission function.
Optionally, the areas outside of the multiselect frame is provided with block grade element, and described piece of grade element binding has monitor method,
This method further include:
The clicking operation of the blank space for the page is monitored by the monitor method；
When listening to the clicking operation, the multiselect frame is closed.
Optionally, the sub-component according to after change specifies region to show the target table in the page, comprising:
Determine that the page specifies the position in region by HTML code；
Region is specified to show the target table in the page according to the sub-component after change.
According to the another aspect of the application, a kind of table display device based on Vue frame is provided, which includes:
Component construction unit, for constructing parent component and sub-component；
Parent component data write unit will be described in form data write-in for obtaining the form data of target table
Parent component, wherein the form data includes table field and list data；
Data transmission unit, for the form data in the parent component to be sent to the sub-component, so that described
The form data is preserved in sub-component；
Multiselect frame assignment unit, for traversing the table field in the sub-component, the table field assignment that will acquire
Give multiselect frame；
Table field changing unit determines the table of user's concern for receiving user to the selection operation of multiselect frame
Lattice field changes the table field in the sub-component according to the table field that the user pays close attention to；
Table display unit, for specifying region to show the target table in the page according to the sub-component after change.
Optionally, the parent component and sub-component, which define, binary array and unitary array；
The parent component data write unit is further used for:
The parent component is written in the table field by the binary array that the list data is written to the parent component
Unitary array.
Optionally, the data transmission unit is further used for:
The form data in the parent component is sent to the sub-component by data transmission function.
Optionally, the areas outside of the multiselect frame is provided with block grade element, and described piece of grade element binding has monitor method,
The device further include:
Clicking operation monitoring unit, for monitoring the click behaviour for the blank space of the page by the monitor method
Make；
Multiselect frame closing unit, for when listening to the clicking operation, closing the multiselect frame.
Optionally, the table display unit is further used for:
Determine that the page specifies the position in region by HTML code；
Region is specified to show the target table in the page according to the sub-component after change.
According to the application another aspect, a kind of storage medium is provided, computer program, described program are stored thereon with
The above-mentioned table display method based on Vue frame is realized when being executed by processor.
According to the application another aspect, a kind of computer equipment is provided, including storage medium, processor and be stored in
On storage medium and the computer program that can run on a processor, the processor realize above-mentioned be based on when executing described program
The table display method of Vue frame.
By above-mentioned technical proposal, a kind of table display method and device based on Vue frame provided by the present application, storage
Medium, computer equipment carry out the transmitting of list data and table field, when user's operation multiselect frame by way of component
When, the access to background data base can't be triggered, the access pressure of background data base is reduced.
Above description is only the general introduction of technical scheme, in order to better understand the technological means of the application,
And it can be implemented in accordance with the contents of the specification, and in order to allow above and other objects, features and advantages of the application can
It is clearer and more comprehensible, below the special specific embodiment for lifting the application.
Detailed description of the invention
The drawings described herein are used to provide a further understanding of the present application, constitutes part of this application, this Shen
Illustrative embodiments and their description please are not constituted an undue limitation on the present application for explaining the application.In the accompanying drawings:
Fig. 1 shows a kind of flow diagram of table display method based on Vue frame provided by the embodiments of the present application；
Fig. 2 shows a kind of schematic diagrams of the table display method based on Vue frame provided by the embodiments of the present application；
The table that Fig. 3 shows a kind of table display method based on Vue frame provided by the embodiments of the present application, which is shown, to be shown
It is intended to；
Fig. 4 shows a kind of structural schematic diagram of table display device based on Vue frame provided by the embodiments of the present application.
Specific embodiment
The application is described in detail below with reference to attached drawing and in conjunction with the embodiments.It should be noted that not conflicting
In the case of, the features in the embodiments and the embodiments of the present application can be combined with each other.
Aiming at the problem that prior art user frequent operation multiselect frame will increase the access pressure of database, the application is implemented
Example provides a kind of table display method based on Vue frame, and list data and table field are carried out by way of component
Transmitting, when user's operation multiselect frame, can't trigger the access to background data base, reduce the visit of background data base
Ask pressure.As shown in Figure 1, this method comprises:
S11: building parent component and sub-component；
The embodiment of the present application is based on Vue framework establishment parent component and sub-component, and Vue is the webpage of a building data-driven
The gradual frame at interface, target be realized by simple application programming interfaces API as far as possible response data binding and
Combined view component.It include iview high quality user interface components library under Vue frame, the embodiment of the present application mainly applies
Table form component in iview user interface components library.In practical applications, pass through invocation component registration function
Vue.compont constructs parent component and sub-component.Component is most powerful one of the function of Vue frame, and component can extend HTML
Element encapsulates reusable code.
It based on Vue framework establishment parent component and sub-component, is answered so that whole system development process is simpler, Vue frame only gathers
Coke is not all-round frame, is very easy to study, and be easy and other libraries or existing Item increasing in view layer.
S12: obtaining the form data of target table, and the parent component is written in the form data；
Wherein, the form data includes list data and table field.
It should be noted that list data refers to the content in table, table field refers to the name of each column of table
Claim.By taking Fig. 3 as an example, " 2018-09-15 ", " 2018-08-10 ", " 2018-08-07 " are list data, and " expiration time " " divides
Phase " is table field.
S13: being sent to the sub-component for the form data in the parent component, so that preserving in the sub-component
The form data；
It will be appreciated that under Vue frame, it can be achieved that parent component is passed to sub-component dynamic after building parent component and sub-component
Value.
S14: traversing the table field in the sub-component, and the table field that will acquire is assigned to multiselect frame.
It will be appreciated that the embodiment of the present application is also provided with multiselect frame on the page, iview user interface is applied
Checkbox multiselect frame component in Component Gallery.Multiselect frame component is one group of multinomial selection of option.By in traversal sub-component
Table field set, multiselect frame shows the field information of corresponding table on the page.Also, multiselect frame is grasped in user
Before work, multiselect frame default is chosen the field of all tables.
For the form data of centralized displaying user concern, this method further include:
S15: user is received to the selection operation of multiselect frame, determines the table field of user's concern；According to the use
The table field of family concern changes the table field in the sub-component；
S16: region is specified to show the target table in the page according to the sub-component after change.
It will be appreciated that many fields are may included in table, but user is not all letters paid close attention in table
Breath, therefore, this programme setting multiselect frame and the selection operation for receiving user, operation display user pays close attention to according to the user's choice
Form data.It is illustrated by taking Fig. 3 as an example, user can select each table field shown in multiselect frame, and user hooks
The table field of choosing is the form data of corresponding user's concern.
For the embodiment of the present application since form data has been sent to sub-component by parent component, sub-component does not directly read data
Library has changed the list data of sub-component according to the field that user pays close attention to, and then according to more when user's operation multiselect frame
Sub-component after changing shows table, and whole process can't trigger the access to background data base, reduce background data base
Access pressure.
It should be noted that the checkbox multiselect frame component in the embodiment of the present application includes checked attribute, by setting
Checked attribute is set to mark whether to select, needs the checked two-way binding that .sync realizes data is arranged, otherwise change
When change state, the data of display can't change.
The embodiment of the present application carries out the transmitting of list data and table field by way of component, when user's operation multiselect
When frame, the access to background data base can't be triggered, reduces the access pressure of background data base.
Similar with the embodiment in Fig. 1 in another embodiment of the application, the parent component and sub-component, which define, to be had
Binary array and unitary array；
It is described that the parent component is written into the list data and table field, comprising:
The parent component is written in the table field by the binary array that the list data is written to the parent component
Unitary array.
It will be appreciated that the list data of multiple lines and multiple rows needs to be saved using binary array, and table field uses
Unitary array saves.
For example, as shown in table 1, the binary array M [3] [3] for defining 3 rows 3 column saves list data, i.e. M [3] [3]
={ 1,2,3,4,5,6,7,8,9 }；It defines unitary array N and saves table field, i.e. N={ A, B, C }
Table 1
| A | B | C |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
Specifically, the data by the parent component are sent to the sub-component, comprising:
The form data in the parent component is sent to the sub-component by data transmission function.
It should be noted that prop is the Custom Attributes that parent component is used to transmit data, father under Vue frame
The data of component need to be transmitted to sub-component by data transmission function props.Whenever the data variation of parent component, the variation
Sub-component can be conducted to.
It will be appreciated that the transmitting of the form data of the application can be illustrated by Fig. 2.Specifically: parent component is from number
According to list data and table field is obtained in library, list data and table field are passed to by subgroup by data transmission function
Part, the table field in sub-component are used to carry out assignment to multiselect frame.
Preferably, the areas outside of the multiselect frame is provided with block grade element, and described piece of grade element binding has monitor method,
This method further include:
The clicking operation of the blank space for the page is monitored by the monitor method；
When listening to the clicking operation, the multiselect frame is closed.
The embodiment of the present application uses the custom instruction of Vue, and block grade element div is arranged in the areas outside of multiselect frame,
Javascript monitor method is bound, for monitoring the click event of mouse, realizes and clicks at page empty, close multiselect effect
Menu.It will be appreciated that the content that div element is the bulk in for html document provides the element of structure and background.
Optionally, the sub-component according to after change specifies region to show the target table in the page, comprising:
Determine that the page specifies the position in region by HTML code；
Region is specified to show the target table in the page according to the sub-component after change.
In practical applications, the position that region is specified in the page can be determined by HTML code.Specifically, table is allowed in HTML
The align attribute of table can be set in lattice center ofthe in a browser, and align attribute is that then table is placed in the middle by center,
Align attribute is that then table keeps left left, and align attribute is that right then keep right by table.
The embodiment of the present application also provides a kind of table display devices based on Vue frame, as shown in figure 4, the device packet
Include component construction unit 41, parent component data write unit 42, data transmission unit 43, multiselect frame assignment unit 44, table word
Section changing unit 45 and table display unit 46, specifically:
Component construction unit 41, for constructing parent component and sub-component；
The embodiment of the present application is based on Vue framework establishment parent component and sub-component, and Vue is the webpage of a building data-driven
The gradual frame at interface, target be realized by simple application programming interfaces API as far as possible response data binding and
Combined view component.It include iview high quality user interface components library under Vue frame, the embodiment of the present application mainly applies
Table form component in iview user interface components library.In practical applications, pass through invocation component registration function
Vue.compont constructs parent component and sub-component.Component is most powerful one of the function of Vue frame, and component can extend HTML
Element encapsulates reusable code.
It based on Vue framework establishment parent component and sub-component, is answered so that whole system development process is simpler, Vue frame only gathers
Coke is not all-round frame, is very easy to study, and be easy and other libraries or existing Item increasing in view layer.
For obtaining the form data of target table institute is written in the form data by parent component data write unit 42
State parent component；
Wherein, the form data includes list data and table field.
It should be noted that list data refers to the content in table, table field refers to the name of each column of table
Claim.By taking Fig. 3 as an example, " 2018-09-15 ", " 2018-08-10 ", " 2018-08-07 " are list data, and " expiration time " " divides
Phase " is table field.
Data transmission unit 43, for the form data in the parent component to be sent to the sub-component, so that institute
It states and preserves the form data in sub-component；
It will be appreciated that under Vue frame, it can be achieved that parent component is passed to sub-component dynamic after building parent component and sub-component
Value.
Multiselect frame, described device are provided on the page further include:
Multiselect frame assignment unit 44, for traversing the table field in the sub-component, the table field that will acquire is assigned
It is worth and gives multiselect frame；
It will be appreciated that the embodiment of the present application is also provided with multiselect frame on the page, iview user interface is applied
Checkbox multiselect frame component in Component Gallery.Multiselect frame component is one group of multinomial selection of option.By in traversal sub-component
Table field set, multiselect frame shows the field information of corresponding table on the page.Also, multiselect frame is grasped in user
Before work, multiselect frame default is chosen the field of all tables.
Table field changing unit 45 determines user's concern for receiving user to the selection operation of multiselect frame
Table field changes the table field in the sub-component according to the table field that the user pays close attention to；
Table display unit 46, for specifying region to show the target table in the page according to the sub-component after change.
It will be appreciated that many fields are may included in table, but user is not all letters paid close attention in table
Breath, therefore, this programme setting multiselect frame and the selection operation for receiving user, operation display user pays close attention to according to the user's choice
Form data.It is illustrated by taking Fig. 3 as an example, user can select each table field shown in multiselect frame, and user hooks
The table field of choosing is the form data of corresponding user's concern.
For the embodiment of the present application since form data has been sent to sub-component by parent component, sub-component does not directly read data
Library has changed the list data of sub-component according to the field that user pays close attention to, and then according to more when user's operation multiselect frame
Sub-component after changing shows table, and whole process can't trigger the access to background data base, reduce background data base
Access pressure.
It should be noted that the checkbox multiselect frame component in the embodiment of the present application includes checked attribute, by setting
Checked attribute is set to mark whether to select, needs the checked two-way binding that .sync realizes data is arranged, otherwise change
When change state, the data of display can't change.
The embodiment of the present application carries out the transmitting of list data and table field by way of component, when user's operation multiselect
When frame, the access to background data base can't be triggered, reduces the access pressure of background data base.
Optionally, the parent component and sub-component, which define, binary array and unitary array；
Parent component data write unit 42 is further used for:
The parent component is written in the table field by the binary array that the list data is written to the parent component
Unitary array.
It will be appreciated that the list data of multiple lines and multiple rows needs to be saved using binary array, and table field uses
Unitary array saves.
Data transmission unit 43 is further used for:
The form data in the parent component is sent to the sub-component by data transmission function.
It should be noted that prop is the Custom Attributes that parent component is used to transmit data, father under Vue frame
The data of component need to be transmitted to sub-component by data transmission function props.Whenever the data variation of parent component, the variation
Sub-component can be conducted to.
It will be appreciated that the transmitting of the form data of the application can be illustrated by Fig. 2.Specifically: parent component is from number
According to list data and table field is obtained in library, list data and table field are passed to by subgroup by data transmission function
Part, the table field in sub-component are used to carry out assignment to multiselect frame.
Optionally, the areas outside of the multiselect frame is provided with block grade element, and described piece of grade element binding has monitor method,
The device further include:
Clicking operation monitoring unit, for monitoring the click behaviour for the blank space of the page by the monitor method
Make；
Multiselect frame closing unit, for when listening to the clicking operation, closing the multiselect frame.
Optionally, table display unit 46 is further used for:
Determine that the page specifies the position in region by HTML code；
Region is specified to show the target table in the page according to the sub-component after change.
Hypertext markup language HTML (HyperText Markup Language) is a kind of specification, and a kind of standard, it is logical
Label symbol is crossed to mark the various pieces in webpage to be shown.Web page files itself are a kind of text files, by text
Marker character is added in this document, can tell how browser shows (such as: how text is handled content therein, and how is picture
It arranges, how picture shows).Browser reads web page files in order, then explains and show its label according to marker character
Content, its mistake will not indicate to the label for writing error, and do not stop its and explain implementation procedure, organizer can only be by aobvious
Show effect to analyze error reason and error position.But it should be noted that for different browsers, it can to same marker character
Not exactly the same explanation can be had, thus might have different display effects.
Why HTML is known as hypertext markup language, is to be exactly because containing so-called " hyperlink " point in text
A kind of URL pointer, by activation (click) it, browser can be made easily to obtain new webpage.This is also that HTML is obtained extensively
One of the most important reason of application.
It can be seen that the essence of webpage is exactly HTML, by be used in combination others Web technology (such as: scripting language,
CGI, component etc.), powerful webpage can be createed.Thus, HTML is the basis of Web programming, that is to say, that WWW
It is built upon on hypertext basis.
In practical applications, the position that region is specified in the page can be determined by HTML code.Specifically, table is allowed in HTML
The align attribute of table can be set in lattice center ofthe in a browser, and align attribute is that then table is placed in the middle by center,
Align attribute is that then table keeps left left, and align attribute is that right then keep right by table.
It should be noted that each involved by a kind of table display device based on Vue frame provided by the embodiments of the present application
Other corresponding descriptions of functional unit, can be with reference to the corresponding description in Fig. 1, Fig. 2 and Fig. 3, and details are not described herein.
Based on above-mentioned method as shown in Figure 1, Figure 2 and Figure 3, correspondingly, the embodiment of the present application also provides a kind of storage Jie
Matter is stored thereon with computer program, the program realized when being executed by processor it is above-mentioned it is as shown in Figure 1, Figure 2 and Figure 3 based on
The table display method of Vue frame.
Based on this understanding, the technical solution of the application can be embodied in the form of software products, which produces
Product can store in a non-volatile memory medium (can be CD-ROM, USB flash disk, mobile hard disk etc.), including some instructions
With so that computer equipment (can be personal computer, server or the network equipment an etc.) execution the application is each
Method described in implement scene.
Based on above-mentioned method as shown in Figure 1, Figure 2 and Figure 3 and virtual bench embodiment shown in Fig. 4, in order to realize
Above-mentioned purpose, the embodiment of the present application also provides a kind of computer equipments, are specifically as follows personal computer, server, network
Equipment etc., the entity device include storage medium and processor；Storage medium, for storing computer program；Processor is used for
Computer program is executed to realize the above-mentioned table display method based on Vue frame as shown in Figure 1, Figure 2 and Figure 3.
Optionally, which can also include user interface, network interface, camera, radio frequency (Radio
Frequency, RF) circuit, sensor, voicefrequency circuit, WI-FI module etc..User interface may include display screen
(Display), input unit such as keyboard (Keyboard) etc., optional user interface can also connect including USB interface, card reader
Mouthful etc..Network interface optionally may include standard wireline interface and wireless interface (such as blue tooth interface, WI-FI interface).
It will be understood by those skilled in the art that a kind of computer equipment structure provided by the embodiments of the present application is not constituted pair
The restriction of the entity device may include more or fewer components, perhaps combine certain components or different component cloth
It sets.
It can also include operating system, network communication module in storage medium.Operating system is that management computer equipment is hard
The program of part and software resource supports the operation of message handling program and other softwares and/or program.Network communication module is used
Communication between each component in realization storage medium inside, and communicated between other hardware and softwares in the entity device.
Through the above description of the embodiments, those skilled in the art can be understood that the application can borrow
It helps software that the mode of necessary general hardware platform is added to realize, hardware realization can also be passed through.Pass through the skill of application the application
Art scheme carries out the transmitting of list data and table field, when user's operation multiselect frame, not by way of component
The access to background data base can be triggered, the access pressure of background data base is reduced.
It should be noted that the terms "include", "comprise" or its any other variant are intended to the packet of nonexcludability
Contain, so that the process, method, article or equipment for including a series of elements not only includes those elements, but also including
Other elements that are not explicitly listed, or further include for elements inherent to such a process, method, article, or device.
In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that including the element
Process, method, article or equipment in there is also other identical elements.
In the description of the present application, numerous specific details are set forth.Although it is understood that embodiments herein can
To practice without these specific details.In some instances, well known method, structure and skill is not been shown in detail
Art, so as not to obscure the understanding of this specification.Similarly, it should be understood that in order to simplify the application and help to understand each hair
One or more of bright aspect, in the description above to the exemplary embodiment of the application, each feature of the application has
When be grouped together into a single embodiment, figure, or description thereof.However, the method for this application should not be construed to
Reflect an intention that i.e. claimed this application claims more more than feature expressly recited in each claim
Feature.More precisely, as the following claims reflect, inventive aspect is less than single embodiment disclosed above
All features.Therefore, it then follows thus claims of specific embodiment are expressly incorporated in the specific embodiment, wherein
Separate embodiments of each claim as the application itself.
It will be appreciated by those skilled in the art that the accompanying drawings are only schematic diagrams of a preferred implementation scenario, module in attached drawing or
Process is not necessarily implemented necessary to the application.It will be appreciated by those skilled in the art that the mould in device in implement scene
Block can according to implement scene describe be distributed in the device of implement scene, can also carry out corresponding change be located at be different from
In one or more devices of this implement scene.The module of above-mentioned implement scene can be merged into a module, can also be into one
Step splits into multiple submodule.
Above-mentioned the application serial number is for illustration only, does not represent the superiority and inferiority of implement scene.Disclosed above is only the application
Several specific implementation scenes, still, the application is not limited to this, and the changes that any person skilled in the art can think of is all
The protection scope of the application should be fallen into.
Claims (10)
1. a kind of table display method based on Vue frame characterized by comprising
Construct parent component and sub-component；
The parent component is written in the form data by the form data for obtaining target table, wherein the form data includes
List data and table field；
Form data in the parent component is sent to the sub-component, so that preserving the table in the sub-component
Information；
The table field in the sub-component is traversed, the table field that will acquire is assigned to multiselect frame；
User is received to the selection operation of multiselect frame, the table field of user's concern is determined, according to user concern
Table field changes the table field in the sub-component；
Region is specified to show the target table in the page according to the sub-component after change.
2. the method according to claim 1, wherein the parent component and sub-component define have binary array and
Unitary array；
It is described that the parent component is written into the list data and table field, comprising:
The table field, is written the unitary of the parent component by the binary array that the list data is written to the parent component
Array.
3. the method according to claim 1, wherein the data by the parent component are sent to the son
Component, comprising:
The form data in the parent component is sent to the sub-component by data transmission function.
4. the method according to claim 1, wherein the areas outside of the multiselect frame is provided with block grade element,
Described piece of grade element binding has monitor method, this method further include:
The clicking operation of the blank space for the page is monitored by the monitor method；
When listening to the clicking operation, the multiselect frame is closed.
5. the method according to claim 1, wherein the sub-component according to after change specifies region in the page
Show the target table, comprising:
Determine that the page specifies the position in region by HTML code；
Region is specified to show the target table in the page according to the sub-component after change.
6. a kind of table display device based on Vue frame characterized by comprising
Component construction unit, for constructing parent component and sub-component；
For obtaining the form data of target table father's group is written in the form data by parent component data write unit
Part, wherein the form data includes list data and table field；
Multiselect frame assignment unit, for traversing the table field in the sub-component, the table field that will acquire is assigned to more
Select frame；
Table field changing unit determines the table word of user's concern for receiving user to the selection operation of multiselect frame
Section changes the table field in the sub-component according to the table field that the user pays close attention to；
Table display unit, for specifying region to show the target table in the page according to the sub-component after change.
7. device according to claim 6, which is characterized in that the data transmission unit is further used for:
The form data in the parent component is sent to the sub-component by data transmission function.
8. device according to claim 6, which is characterized in that the areas outside of the multiselect frame is provided with block grade element,
Described piece of grade element binding has monitor method, described device further include:
Clicking operation monitoring unit, for monitoring the clicking operation of the blank space for the page by the monitor method；
Multiselect frame closing unit, for when listening to the clicking operation, closing the multiselect frame.
9. a kind of storage medium, is stored thereon with computer program, which is characterized in that realization when described program is executed by processor
Table display method based on Vue frame described in any one of claims 1 to 5.
10. a kind of computer equipment, including storage medium, processor and storage can be run on a storage medium and on a processor
Computer program, which is characterized in that the processor is realized described in any one of claims 1 to 5 when executing described program
The table display method based on Vue frame.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910044506.5A CN109933321A (en) | 2019-01-17 | 2019-01-17 | Table display method and device, storage medium based on Vue frame |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910044506.5A CN109933321A (en) | 2019-01-17 | 2019-01-17 | Table display method and device, storage medium based on Vue frame |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109933321A true CN109933321A (en) | 2019-06-25 |
Family
ID=66985139
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910044506.5A Pending CN109933321A (en) | 2019-01-17 | 2019-01-17 | Table display method and device, storage medium based on Vue frame |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109933321A (en) |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110851133A (en) * | 2019-10-12 | 2020-02-28 | 深圳前海金融资产交易所有限公司 | Front-end component library, and webpage response method and device based on front-end component library |
| CN111177185A (en) * | 2019-12-30 | 2020-05-19 | 北京同创永益科技发展有限公司 | Method, system and device for recording user selection dynamic form |
| CN111290752A (en) * | 2019-12-24 | 2020-06-16 | 浙江明度智控科技有限公司 | Web table frame processing method and device |
| CN111382157A (en) * | 2020-03-09 | 2020-07-07 | 山东汇贸电子口岸有限公司 | Device for realizing multi-plug-in form traversal operation through constructor based on service |
| CN111427574A (en) * | 2020-03-17 | 2020-07-17 | 深圳市震有软件科技有限公司 | Method, device, equipment and medium for realizing automatic page turning and carousel component of list |
| CN111596984A (en) * | 2020-04-24 | 2020-08-28 | 西安震有信通科技有限公司 | List data display method |
| CN112287019A (en) * | 2020-11-22 | 2021-01-29 | 长沙修恒信息科技有限公司 | Setting system for hiding field display in UI (user interface) in ERP (enterprise resource planning) system |
| CN112580315A (en) * | 2020-12-14 | 2021-03-30 | 深圳市金证前海金融科技有限公司 | Webpage table display method and device, terminal equipment and medium |
| CN113126992A (en) * | 2021-05-11 | 2021-07-16 | 南京炫佳网络科技有限公司 | Control element control method, device, equipment and storage medium |
| CN113128174A (en) * | 2021-03-18 | 2021-07-16 | 深圳震有科技股份有限公司 | Vue-based dynamic display processing method and device according to text word number |
| CN114020252A (en) * | 2021-10-28 | 2022-02-08 | 四川启睿克科技有限公司 | Method for dynamically rendering multi-level header based on vue and element |
| CN117270855A (en) * | 2023-11-22 | 2023-12-22 | 杭州比智科技有限公司 | Method for realizing table height self-adaption based on vue |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
| CN108228753A (en) * | 2017-12-21 | 2018-06-29 | 国云科技股份有限公司 | A kind of Dynamic Display method of page end real time data |
| CN108804946A (en) * | 2018-06-12 | 2018-11-13 | 成都优易数据有限公司 | A kind of table button authority control method based on Vue.js |
| CN108959206A (en) * | 2018-07-02 | 2018-12-07 | 浪潮软件股份有限公司 | A kind of method and system of the optimization front end Vue form component rendering performance |
-
2019
- 2019-01-17 CN CN201910044506.5A patent/CN109933321A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
| CN108228753A (en) * | 2017-12-21 | 2018-06-29 | 国云科技股份有限公司 | A kind of Dynamic Display method of page end real time data |
| CN108804946A (en) * | 2018-06-12 | 2018-11-13 | 成都优易数据有限公司 | A kind of table button authority control method based on Vue.js |
| CN108959206A (en) * | 2018-07-02 | 2018-12-07 | 浪潮软件股份有限公司 | A kind of method and system of the optimization front end Vue form component rendering performance |
Non-Patent Citations (2)
| Title |
|---|
| EWALL_熊猫: "一个表格组件-vuejs示例", pages 1 - 5, Retrieved from the Internet <URL:《简书：https://www.jianshu.com/p/5d7f51c9a13e》> * |
| 牛奋DEBUG: "vue 中 elementui 自定义表头并且添加事件", pages 1, Retrieved from the Internet <URL:《开源中国：https://my.oschina.net/andyfeng/blog/1814837》> * |
Cited By (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110851133A (en) * | 2019-10-12 | 2020-02-28 | 深圳前海金融资产交易所有限公司 | Front-end component library, and webpage response method and device based on front-end component library |
| CN111290752A (en) * | 2019-12-24 | 2020-06-16 | 浙江明度智控科技有限公司 | Web table frame processing method and device |
| CN111290752B (en) * | 2019-12-24 | 2024-02-20 | 明度智云(浙江)科技有限公司 | Frame processing method and device for web form |
| CN111177185A (en) * | 2019-12-30 | 2020-05-19 | 北京同创永益科技发展有限公司 | Method, system and device for recording user selection dynamic form |
| CN111382157A (en) * | 2020-03-09 | 2020-07-07 | 山东汇贸电子口岸有限公司 | Device for realizing multi-plug-in form traversal operation through constructor based on service |
| CN111427574B (en) * | 2020-03-17 | 2024-01-30 | 深圳市震有软件科技有限公司 | Method, device, equipment and medium for realizing automatic page turning carousel component of list |
| CN111427574A (en) * | 2020-03-17 | 2020-07-17 | 深圳市震有软件科技有限公司 | Method, device, equipment and medium for realizing automatic page turning and carousel component of list |
| CN111596984A (en) * | 2020-04-24 | 2020-08-28 | 西安震有信通科技有限公司 | List data display method |
| CN112287019A (en) * | 2020-11-22 | 2021-01-29 | 长沙修恒信息科技有限公司 | Setting system for hiding field display in UI (user interface) in ERP (enterprise resource planning) system |
| CN112580315A (en) * | 2020-12-14 | 2021-03-30 | 深圳市金证前海金融科技有限公司 | Webpage table display method and device, terminal equipment and medium |
| CN113128174A (en) * | 2021-03-18 | 2021-07-16 | 深圳震有科技股份有限公司 | Vue-based dynamic display processing method and device according to text word number |
| CN113128174B (en) * | 2021-03-18 | 2024-05-07 | 深圳震有科技股份有限公司 | Dynamic display processing method and device based on vue according to text word number |
| CN113126992A (en) * | 2021-05-11 | 2021-07-16 | 南京炫佳网络科技有限公司 | Control element control method, device, equipment and storage medium |
| CN114020252A (en) * | 2021-10-28 | 2022-02-08 | 四川启睿克科技有限公司 | Method for dynamically rendering multi-level header based on vue and element |
| CN117270855A (en) * | 2023-11-22 | 2023-12-22 | 杭州比智科技有限公司 | Method for realizing table height self-adaption based on vue |
| CN117270855B (en) * | 2023-11-22 | 2024-01-30 | 杭州比智科技有限公司 | Method for realizing table height self-adaption based on vue |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109933321A (en) | Table display method and device, storage medium based on Vue frame | |
| US20210303561A1 (en) | System for providing dynamic linked panels in user interface | |
| US10656907B2 (en) | Translation of natural language into user interface actions | |
| WO2018208806A1 (en) | System and method for arranging application icons on a mobile device | |
| CN107451184A (en) | Page display method and device, user equipment, storage medium | |
| CN107908442B (en) | Spring-based resource loading method and device, terminal equipment and computer-readable storage medium | |
| CN104426925A (en) | Webpage resource obtaining method and apparatus | |
| CN106909294B (en) | Method and device for realizing data graph comparison on touch screen equipment | |
| CN112068911B (en) | Electronic form generation method, device, system, equipment and medium | |
| CN109240756A (en) | A kind of method and device of dynamically load JavaScript module | |
| CN110069734A (en) | A kind of page assembly shows method and apparatus | |
| US10210001B2 (en) | Automatic execution of objects in a user interface | |
| CN112579686A (en) | Interaction method, interaction device, storage medium and electronic equipment | |
| CN111338625B (en) | Data processing method, system, terminal equipment and storage medium | |
| CN106649320B (en) | rectangular tree graph processing method and device | |
| CN112667934A (en) | Dynamic simulation diagram display method and device, electronic equipment and computer readable medium | |
| US9342530B2 (en) | Method for skipping empty folders when navigating a file system | |
| CN105426541B (en) | A kind of storage method and device of general data | |
| CN112966481A (en) | Data table display method and device | |
| US10114805B1 (en) | Inline address commands for content customization | |
| CN110955813A (en) | Data crawling method and device | |
| US9864739B1 (en) | Automatic layout of graphical user interface screens from object data | |
| CN107608947A (en) | Html file processing method and processing device, electronic equipment | |
| Siregar et al. | LiteRate: A Shiny R app for improving data literacy in Indonesia | |
| US20140245218A1 (en) | Displaying data sets across a plurality of views of a user interface |
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 |