Universal table creating method based on vue technology

Abstract

The invention discloses a universal table creation method based on a vue technology, and the method specifically comprises the steps: creating a table search function part which is used for displaying a search condition of a table; the table creating function part is used for providing a table in Elementui to display data; creating a paging function part, wherein the paging function part is used for providing a paging control in the Elementui; the table data acquisition processing part is created and used for requesting table data from a database; and creating a table resetting function part for resetting the table. When a front-end developer implements a table page, the developer does not need to do some repeated development work, so that the time cost and mental burden of the developer are reduced, and the development efficiency is greatly improved.

Description

Technical Field

[0001] The present invention relates to the field of general table creation, and in particular to a general table creation method based on Vue technology. Background Art

[0002] With the development of society, it is necessary to display various data on the website. Especially for enterprise management systems, the "table" method is undoubtedly the most traditional and the most effective. Therefore, developing various tables in the enterprise backend management system has become an inevitable task for developers. It is expected that there is a method or a component that can display a complete table on the page as long as it is placed there and provides very few necessary conditions. The content includes: table search conditions, query and reset buttons in the search conditions, tables, and paging. And in order to meet different usage scenarios, it is expected that the search conditions, paging, tables and other parts of the table page can be customized.

[0003] Elementui is a page control component library, which contains common website display controls such as buttons, tables, paging, input boxes, date pickers, etc.

[0004] In the existing technical solutions for implementing table pages, when the technology stack is: vue and Elementui, there are generally the following solutions:

[0005] Take various form controls in the component library: input boxes, date selectors, etc. one by one to display the search conditions of the table; display the data in the database requested through ajax on the table; take the paging components in the component library to complete the page turning function of the table page.

[0006] Disadvantages of existing solutions:

[0007] If there are many table pages, the existing solution is undoubtedly cumbersome and inefficient. Developers need to do a lot of repetitive development work, which increases development time and development costs.

[0008] From the perspective of code level and website performance optimization, a large amount of redundant code will increase the size of the code package. In terms of system use, it will increase the time when the page is blank, because the large size of the code package will increase the network transmission time. Summary of the invention

[0009] In view of the above problems, the present invention is proposed to provide a general table creation method based on Vue technology to overcome the above problems or at least partially solve the above problems.

[0010] According to one aspect of the present invention, a general table creation method based on Vue technology is provided, and the general table creation method specifically includes:

[0011] Create a table search function section to display the search conditions of the table;

[0012] Create a table function part to provide a table in Elementui to display data;

[0013] Create a paging function part to provide paging controls in Elementui;

[0014] Create a table data acquisition processing part to request table data from the database;

[0015] Create a table reset function to reset the table.

[0016] Optionally, the creating table search function part specifically includes:

[0017] Display of search terms on the page;

[0018] Receive a required condition FormData: {value1: "", value2: ""} to store the value selected by the user;

[0019] Query and reset buttons, click the corresponding button to execute the corresponding query logic in the present invention.

[0020] Optionally, the display of the search conditions on the page specifically includes:

[0021] Receive a necessary condition FormList, whose data format is an array: [{name:'input box name', type:'input box', key:'value1'}, {name:'drop-down selection box name', type:'drop-down selection box', key:'value2'}];

[0022] The v-for directive in Vue traverses the array and decides which control in Elementui should be displayed based on the type field in each {}.

[0023] Optionally, the table creation function part specifically includes:

[0024] Receive a necessary condition tableColumnList to display the table header and what data each column of the table displays;

[0025] The number of {} in tableColumnList indicates how many columns the table has;

[0026] tableColumnList: [{tableHead: "first column header name", tableColumnKey: "key1"}, {tableHead: "second column header name", tableColumnKey: "key2"}];

[0027] Assign the requested data tableData to the table;

[0028] The number of {} in tableData indicates how many rows the table has;

[0029] tableData: [{key1: "table first column first row", key2: "table second column first row"}, {key1: "table first column second row", key2: "table second column second row"}];

[0030] Through the $attrs and $listener instructions in Vue, the developer's customized configuration of the table control is assigned to the table control, so that the developer can freely use the configuration capabilities of the table in Elementui.

[0031] Optionally, the paging function creation part specifically includes:

[0032] Receive a non-essential condition isShowPage to determine whether the current table needs paging function;

[0033] Provides paging controls in Elementui and provides complete paging function logic. When the user clicks the page number of the paging control, the data of the current page is re-requested after switching the page number;

[0034] When the user resets the maximum number of data items displayed on a page, the current page data is requested again after the maximum number of data items is set;

[0035] And assign the result to the created table.

[0036] Optionally, the creation of the table data acquisition processing part specifically includes:

[0037] Receive a required condition RequestApi;

[0038] Call the ajax request method to request table data from the database.

[0039] Optionally, the creation of the table reset function part specifically includes:

[0040] When you click the reset button in the search criteria, the reset function is executed:

[0041] Clear all search conditions;

[0042] Change the paging page number to the first page, and then execute the table query logic.

[0043] The present invention provides a general table creation method based on Vue technology, and the general table creation method specifically includes: creating a table search function part for displaying the search conditions of the table; creating a table function part for providing a table in Elementui to display data; creating a paging function part for providing a paging control in Elementui; creating a table data acquisition processing part for requesting table data from a database; creating a table reset function part for resetting the table. When the front-end developer implements a table page, he no longer needs to do some repeated development work, which reduces the time cost and mental burden of the developer and greatly improves the development efficiency.

[0044] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0046] Figure 1 A flowchart of a general table creation method based on Vue technology provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0047] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0048] The terms "comprises" and "having" and any variations thereof in the description embodiments, claims and drawings of the present invention are intended to cover non-exclusive inclusions, for example, including a series of steps or units.

[0049] The technical solution of the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments.

[0050] like Figure 1 As shown, a general table creation method based on Vue technology includes:

[0051] Divide a complete table page into several parts: table search function part, table function part, paging function part, table data acquisition and processing part, and table reset function.

[0052] 1. The table search function is mainly used to display the search conditions of the table and consists of the following parts: (1) Display of the search conditions on the page.

[0053] The present invention receives a necessary condition FormList, whose data format is an array: [{name:'input box name', type:'input box', key:'value1'}, {name:'drop-down selection box name', type:'drop-down selection box', key:'value2'}], (this means there are two search conditions, namely input box and drop-down selection box, and the number of {} is used to determine how many search conditions there are)

[0054] The present invention traverses the array through the v-for instruction in Vue and determines which control in the E l ementui should be displayed currently according to the type field in each {}.

[0055] (2) The present invention receives a necessary condition FormData: {value1: "", value2: ""} to store the value selected by the user. If the user enters "Who am I" in the input box in (1), the value of value1 in FormData is "Who am I". The user's input result or selection result is obtained through FormData for use in query.

[0056] (3) Query and reset buttons are provided by the present invention. Clicking the corresponding button to execute the corresponding query logic or reset logic in the present invention is also provided by the present invention.

[0057] (4) If the current table page does not require search conditions, the necessary conditions in (1) and (2) above become non-necessary conditions.

[0058] 2. Table function part. The present invention provides a table in Elementui to display data.

[0059] The present invention receives a necessary condition tableCollumnList to display the table header and what data each column of the table displays. The number of {} in tableCollumnList indicates how many columns the table has.

[0060] tab l eCo l umnL i st:[{tab l eHead:“First column header name”, tab l eCo lumnKey:“key1”},{tab l eHead:“Second column header name”, tab l eCo l umnKey:“key2”}].

[0061] The present invention assigns the requested data tableData to the table. The number of {} in tableData indicates how many rows the table has.

[0062] tab l eData:[{key1:"the first column and the first row of the table", key2:"the second column and the first row of the table"},{key1:"the first column and the second row of the table", key2:"the second column and the second row of the table"}]

[0063] Since the present invention provides a table control in Elementui, in order to ensure the developer's customized use of the functions of the table control itself, the present invention assigns the developer's customized configuration of the table control to the table control provided by the present invention through the $attrs and $listener instructions in Vue, so that the developer can freely use the configuration capabilities of the table in Elementui.

[0064] 3. Paging function part. The present invention receives a non-essential condition isShowPage to determine whether the current table needs paging function. The present invention provides the paging control in Elementui and provides complete paging function logic. When the user clicks the page number of the paging control, the present invention re-requests the data of the current page after switching the page number. When the user resets the maximum number of data displayed on a page, the present invention re-requests the data of the current page after setting the maximum number of data on a page. And assigns the result to the table in 2.

[0065] 4. Table data acquisition and processing part. The table data processing part is the core of the present invention. The present invention receives a necessary condition RequestApi. This is a method that can call an ajax request, and through this method, table data can be requested from the database. The specific logic is as follows:

[0066] (1) The present invention receives a non-essential condition DefaultSearch: {defaultKey: "otherVa lue"} as a search condition for storing other non-form controls except the search condition in 1. DefaultSearch and FormData in 1 are combined to form the final query condition serchData.

[0067] (2) The present invention provides a non-essential condition FormatterSearchData to developers. This is a request parameter processing function that receives serchData and processes serchData to form the final request parameter real SearchData. Whether processing is required and how to process it are determined by the developer.

[0068] (3) Transfer the real SearchData to the database through RequestApi and obtain the table data returned by the database.

[0069] (4) There may be some technical reasons (different reasons in different situations). The data format returned by the database may not be the data format required by the table in 2. Therefore, the present invention provides a non-essential condition FormatterResultData: result processing function to developers, which allows developers to freely process the returned data.

[0070] (5) After the result processing function, the final table data is obtained and assigned to the table. After that, the present invention provides a result notification function for the developer: hand l eSuccess. The purpose is to inform the developer that the table rendering is completed and provide the table data to the developer, so that the developer can use it for other purposes.

[0071] 5. Table reset function. When you click the reset button in the search condition, the reset function will be executed: first clear all the search conditions in 1. Then change the paging page number in 3 to the first page. Then execute the table query logic in 4.

[0072] The purpose of the present invention is to realize that when writing a page, the functions such as search conditions, tables, paging, query and reset, and reassignment of data to tables will be written again. It is expected to realize a component that encapsulates the common parts of a table page. You only need to tell: 1. Where to get the data from. 2. What data the table displays. These two necessary conditions and 3. If search conditions are required, what are the search conditions (in this case, the search conditions are necessary conditions). A complete table page is provided to the developer, and of course some non-essential conditions are also received or exposed to the outside to allow the developer to achieve complete and flexible control over the table page.

[0073] Beneficial effects:

[0074] 1. When front-end developers implement a table page, they no longer need to do some repetitive development work, which reduces the time cost and mental burden of developers and greatly improves development efficiency. 2. Greatly simplifies the code, reduces the amount of code, increases the page opening speed, and improves user experience.

[0075] 3. When maintaining the table page in the future, such as uniformly adding or deleting certain functions for all table pages, it is only necessary to modify it once in the present invention.

[0076] The above specific implementation methods further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above are only specific implementation methods of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A general table creation method based on Vue technology, characterized in that: The general table creation method specifically includes: Create a table search function section to display the search conditions of the table; Create a table function part to provide a table in Elementui to display data; Create a paging function part to provide paging controls in Elementui; Create a table data acquisition processing part to request table data from the database; Create a table reset function to reset the table.

2. According to a general table creation method based on Vue technology according to claim 1, it is characterized in that: The creation of the table search function specifically includes: Display of search terms on the page; Receive a necessary condition FormData: {value1:"",value2:""} to store the value selected by the user; Query and reset buttons, click the corresponding button to execute the corresponding query logic in the present invention.

3. According to a general table creation method based on Vue technology according to claim 2, it is characterized in that: The display of the search conditions on the page specifically includes: Receive a necessary condition FormList, whose data format is an array: [{name:'input box name', type:'input box', key:'value1'}, {name:'drop-down selection box name', type:'drop-down selection box', key:'value2'}]; The v-for directive in Vue traverses the array and decides which control in Elementui should be displayed based on the type field in each {}.

4. According to a general table creation method based on Vue technology according to claim 1, it is characterized in that: The table creation function part specifically includes: Receive a necessary condition tableColumnList to display the table header and what data each column of the table displays; The number of {} in tableColumnList indicates how many columns the table has; tableColumnList: [{tableHead:"first column header name", tableColumnKey:"key1"},{tableHead:"second column header name", tableColumnKey:"key2"}]; Assign the requested data tableData to the table; The number of {} in tableData indicates how many rows the table has; tableData: [{key1:"table first column first row", key2:"table second column first row"},{key1:"table first column second row", key2:"table second column second row"}]; Through the $attrs and $listener instructions in Vue, the developer's customized configuration of the table control is assigned to the table control, so that the developer can freely use the configuration capabilities of the table in Elementui.

5. According to a general table creation method based on Vue technology according to claim 1, it is characterized in that: The paging function creation part specifically includes: Receive a non-essential condition isShowPage to determine whether the current table needs paging function; Provides paging controls in Elementui and provides complete paging function logic. When the user clicks the page number of the paging control, the data of the current page is re-requested after switching the page number; When the user resets the maximum number of data items displayed on a page, the current page data is requested again after the maximum number of data items is set; And assign the result to the created table.

6. According to a general table creation method based on Vue technology according to claim 1, it is characterized in that: The creation of the table data acquisition processing part specifically includes: Receive a required condition RequestApi; Call the ajax request method to request table data from the database.

7. According to a general table creation method based on Vue technology according to claim 1, it is characterized in that: The creation table reset function part specifically includes: When you click the reset button in the search criteria, the reset function is executed: Clear all search conditions; Change the paging page number to the first page, and then execute the table query logic.

Images