Table display method, computer device and computer program product

Abstract

The present application relates to a table display method, a computer device and a computer program product. The method comprises: in response to an access request of a target browser page, and in the case where the column width information of at least one candidate table is recorded in the browser cache, obtaining the target table corresponding to the column width information; the column width information is obtained based on the historical column width adjustment operation record triggered on the target table; the candidate table is a table contained in the target browser page; the column width of the target table is adjusted according to the column width information, and the target table after the column width adjustment is displayed in the target browser page. The method can be used to directly adjust the column width of the browser page table according to the column width stored in the cache without the user having to perform repeated adjustment operations, and in this way, the intelligence of the table display in the browser page can be improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a table display method, a computer device, a computer-readable storage medium, and a computer program product. Background Art

[0002] With the development of computer technology, a technology for displaying data through tables in browser pages has emerged. Since tables can present large amounts of data in a structured manner, allowing users to easily view and manipulate data, they are widely used in browser pages such as management backend systems, e-commerce platforms, and data analysis tools.

[0003] In traditional technologies, when displaying data in a table on a browser page, users can adjust the table layout according to their own preferences to adapt to different screen sizes and display requirements. For example, users can freely adjust the column width of the table according to factors such as the length and importance of the content to ensure clear visibility of the data, and can also improve the readability and operability of the table to improve work efficiency.

[0004] However, for tables currently presented in browser pages, when a user changes the table column width, when the user closes the page and revisits it, the table column width returns to its original width, and the user needs to adjust the browser page table column width again, resulting in repeated operations. Therefore, the table display in existing browser pages is not smart enough. Summary of the invention

[0005] Based on this, it is necessary to provide a table display method, device, computer equipment, computer-readable storage medium and computer program product that can improve the intelligence of table display in browser pages in response to the above technical problems.

[0006] In a first aspect, the present application provides a table display method, comprising:

[0007] In response to an access request of a target browser page, and in the case where column width information of at least one candidate table is recorded in a browser cache, obtaining a target table corresponding to the column width information; the column width information is obtained based on a historical column width adjustment operation record triggered on the target table; the candidate table is a table included in the target browser page;

[0008] The column width of the target table is adjusted according to the column width information, and the target table after the column width adjustment is displayed on the target browser page.

[0009] In one of the embodiments, the browser cache records the correspondence between multiple table identifiers and column width information; when the browser cache records the column width information of at least one candidate table included in the target browser page, obtaining the target table corresponding to the column width information includes: reading the browser cache through the mounted lifecycle function of the pre-built target table component to obtain the table identifier recorded in the browser cache; when the recorded table identifier includes at least one candidate table identifier, obtaining the column width information corresponding to each candidate table identifier; the candidate table identifier is the table identifier of the candidate table included in the target browser page; and using the table identified by the candidate table identifier corresponding to each of the column width information as the target table corresponding to each of the column width information.

[0010] In one of the embodiments, the table identifier recorded in the browser cache includes: page path information; after obtaining the table identifier recorded in the browser cache, it also includes: obtaining the current page path information carried in the current table identifier, and the target page path information of the target browser page; the current table identifier is any one of the table identifiers recorded in the browser cache; when the current page path information matches the target page path information, the current table identifier is used as the candidate table identifier.

[0011] In one of the embodiments, the column width information includes: the table columns to be adjusted contained in the target table, and the target column width values ​​corresponding to the table columns to be adjusted; adjusting the column width of the target table according to the column width information includes: adjusting the column width value of the target table corresponding to the table columns to be adjusted to the target column width value.

[0012] In one of the embodiments, when the column width information of the candidate table included in the target browser page is recorded in the browser cache, before obtaining the target table corresponding to the column width information, it also includes: in response to a column width adjustment operation for any of the candidate tables, obtaining the candidate table corresponding to the column width adjustment operation, and the column width information corresponding to the column width adjustment operation; recording in the browser cache the correspondence between the candidate table corresponding to the column width adjustment operation, and the column width information corresponding to the column width adjustment operation.

[0013] In one of the embodiments, before the response to the column width adjustment operation for any of the candidate tables, it also includes: listening to the headerDragend event triggered for any of the candidate tables through a pre-built target table component; the response to the column width adjustment operation for any of the candidate tables, obtaining the candidate table corresponding to the column width adjustment operation, includes: in response to the headerDragend event triggered for any of the candidate tables, obtaining the candidate table.

[0014] In one of the embodiments, the target table component is constructed by the following steps: creating a Vue component, referencing the table component of ElementUI in the Vue component, and passing the properties and events of the Vue component to the properties and events of the table component of ElementUI to obtain an initial table component; adding a first component operation logic and a second component operation logic to the initial table component to obtain the target table component; the first component operation logic is used to realize reading the browser cache through the mounted life cycle function, and the second component operation logic is used to realize monitoring of the headerDragend event of the table, and when the headerDragend event is triggered, recording the table and column width information corresponding to the headerDragend event.

[0015] In one of the embodiments, the table display method also includes: when the column width information of the candidate table is not recorded in the browser cache, obtaining initial column width information corresponding to the candidate table; the initial column width information includes the initial column width value of each table column in the candidate table; and displaying the candidate table in the target browser page according to the initial column width value of each table column in the initial column width information.

[0016] In a second aspect, the present application also provides a table display device, comprising:

[0017] a target table acquisition module, for responding to an access request of a target browser page and, if column width information of at least one candidate table is recorded in a browser cache, acquiring a target table corresponding to the column width information; the column width information is obtained based on a historical column width adjustment operation record triggered on the target table; the candidate table is a table included in the target browser page;

[0018] The target table display module is used to adjust the column width of the target table according to the column width information, and display the target table after the column width is adjusted in the target browser page.

[0019] In a third aspect, the present application further provides a computer device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the method described in any one of the embodiments of the first aspect when executing the computer program.

[0020] In a fourth aspect, the present application further provides a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the method described in any one of the embodiments of the first aspect.

[0021] In a fifth aspect, the present application further provides a computer program product, comprising a computer program, which, when executed by a processor, implements the steps of the method described in any one of the embodiments of the first aspect.

[0022] The above-mentioned table display method, device, computer equipment, computer-readable storage medium and computer program product obtain the target table corresponding to the column width information by responding to the access request of the target browser page and recording the column width information of at least one candidate table in the browser cache; the column width information is obtained based on the historical column width adjustment operation record triggered on the target table; the candidate table is a table included in the target browser page; the column width of the target table is adjusted according to the column width information, and the target table with adjusted column width is displayed in the target browser page. The present application can determine the target table corresponding to the column width information when a target browser page is accessed, if the browser cache records the column width information of at least one candidate table contained in the target browser page, wherein the column width information recorded in the cache is obtained by recording the historical column width adjustment operations triggered on the target table, and then the column width of the target table can be adjusted according to the column width information, so that the adjusted target table is displayed in the target browser page. In this way, when the user changes the table column width, the changed column width information can be stored in the browser cache, so that when the user revisits, the column width of the browser page table can be directly adjusted according to the column width stored in the cache, without the user having to perform repeated adjustment operations. In this way, the intelligence of the table display in the browser page can be improved. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0024] Figure 1 A schematic diagram of a flow chart of a table display method in one embodiment;

[0025] Figure 2 A schematic diagram of a process of obtaining a target table corresponding to column width information in one embodiment;

[0026] Figure 3 It is a schematic diagram of a flow chart for recording the correspondence between the candidate table and the column width information in one embodiment;

[0027] Figure 4 A schematic diagram of a process for constructing a target table component in one embodiment;

[0028] Figure 5 A flowchart of a method for recording table column width dragging in one embodiment;

[0029] Figure 6 A schematic diagram of a component form of a custom table component in one embodiment;

[0030] Figure 7 A schematic diagram of a process for initializing the width of a table in one embodiment;

[0031] Figure 8 A schematic diagram of a process of monitoring and recording changes in table column width in one embodiment;

[0032] Fig. 9 It is a structural block diagram of a table display device in an embodiment;

[0033] Fig.10 FIG. 4 is a diagram showing the internal structure of a computer device in one embodiment. DETAILED DESCRIPTION

[0034] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0035] In one embodiment, Figure 1 As shown, a table display method is provided. This embodiment uses the method applied to a terminal as an example for illustration. It can be understood that the method can also be applied to a server, and can also be applied to a system including a terminal and a server, and is implemented through the interaction between the terminal and the server. In this embodiment, the method includes the following steps:

[0036] Step S101, in response to an access request of a target browser page, and in the case where column width information of at least one candidate table is recorded in the browser cache, a target table corresponding to the column width information is obtained; the column width information is obtained based on a historical column width adjustment operation record triggered on the target table; the candidate table is a table contained in the target browser page.

[0037] The target browser page refers to the browser page that the user needs to access, and the browser cache refers to the cache of the browser used to display the target browser page. The target browser page may display a table, and the candidate table refers to the table included in the target browser page, that is, the table displayed in the target browser page. For example, if the target browser page contains three tables, namely Table A, Table B and Table C, then the above Table A, Table B and Table C are the candidate tables corresponding to the target browser page.

[0038] Column width information refers to the width information of a table column in the candidate table. The column width information may be composed of two parts, including a table column and a width value of the table column. The target table refers to the candidate table that records the column width information. The record of the column width information in the browser cache may be a record of a historical column width adjustment operation triggered by a user on the target table. The historical column width adjustment operation refers to a column width adjustment operation for the target table that has been triggered by the user before initiating an access request to the target browser page. For example, it may be a column width adjustment operation triggered for the target table when the user previously visited the target browser page.

[0039] Specifically, when the user previously visited the target browser page, if a column width adjustment operation was triggered for table A in the target browser page, the terminal can pre-record table A and the column width information corresponding to the column width adjustment operation in the browser cache. When the user visits the target browser page again, since the browser cache now records the column width information of the candidate table contained in the target browser page, that is, table A, the terminal can use table A as the target table corresponding to the column width information.

[0040] Step S102, adjusting the column width of the target table according to the column width information, and displaying the target table after the column width adjustment in the target browser page.

[0041] At this time, since the terminal has obtained the column width information corresponding to the target table in the browser cache, the terminal can adjust the column width of the target table according to the above column width information. For example, the column width information of Table A can be used to adjust the column width of Table A, thereby displaying the target table with adjusted column width in the target browser page.

[0042] In the above table display method, by responding to the access request of the target browser page and recording the column width information of at least one candidate table in the browser cache, the target table corresponding to the column width information is obtained; the column width information is obtained based on the historical column width adjustment operation record triggered on the target table; the candidate table is a table contained in the target browser page; the column width of the target table is adjusted according to the column width information, and the target table with adjusted column width is displayed in the target browser page. The present application can determine the target table corresponding to the column width information when a target browser page is accessed, if the browser cache records the column width information of at least one candidate table contained in the target browser page, wherein the column width information recorded in the cache is obtained by recording the historical column width adjustment operations triggered on the target table, and then the column width of the target table can be adjusted according to the column width information, so that the adjusted target table is displayed in the target browser page. In this way, when the user changes the table column width, the changed column width information can be stored in the browser cache, so that when the user revisits, the column width of the browser page table can be directly adjusted according to the column width stored in the cache, without the user having to perform repeated adjustment operations. In this way, the intelligence of the table display in the browser page can be improved.

[0043] In one embodiment, the browser cache records the correspondence between multiple table identifiers and column width information; Figure 2 As shown, step S101 may further include:

[0044] Step S201, reading the browser cache through the mounted lifecycle function of the pre-built target table component, and obtaining the table identifier recorded in the browser cache.

[0045] Among them, the table identifier is information used to uniquely identify a table, for example, it can be the name of the table, or it can be a randomly generated unique variable for the table. In this embodiment, the way in which the browser cache records the column width information of the table can be achieved by recording the correspondence between the table identifier and the column width information of the table, and the target table component is a pre-built table component. The target table component carries business logic code for implementing the automatic adjustment function of the table width. The target table component can include a mounted lifecycle function, which can be used to implement the reading function of the browser cache.

[0046] Specifically, when the terminal responds to the access request of the target browser page, it can first complete the reading of the browser cache through the mounted lifecycle function contained in the pre-built target table component, and then complete the traversal of the table identifiers stored in the browser cache to obtain each table identifier recorded in the browser cache.

[0047] Step S202: when the recorded table identifiers include at least one candidate table identifier, obtain column width information corresponding to each candidate table identifier; the candidate table identifier is a table identifier of a candidate table included in the target browser page.

[0048] Step S203 : taking the table identified by the candidate table identifier corresponding to each column width information as the target table corresponding to each column width information.

[0049] The candidate table identifier refers to the table identifier of the candidate table included in the target browser page. If the table identifier recorded in the browser cache also includes the candidate table identifier, it can be said that the browser cache records the column width information of the candidate table included in the target browser page, so the terminal can obtain the column width information corresponding to each candidate table identifier. Afterwards, the terminal can also use the table identified by the candidate table identifier corresponding to each column width information as the target table corresponding to each column width information.

[0050] For example, the browser cache may record column width information corresponding to table identifier A, column width information corresponding to table identifier B, and column width information corresponding to table identifier F, where table identifier A and table identifier B are table identifiers of candidate tables of the target browser page. The terminal can then obtain column width information A corresponding to table identifier A and column width information B corresponding to table identifier B, respectively, and use table A as the target table corresponding to column width information A, and use table B as the target table corresponding to column width information B.

[0051] In this embodiment, the browser cache may record the correspondence between multiple table identifiers and column width information, and after initiating an access request to the target browser page, the mounted lifecycle function of the target table component may be used to read the table identifier recorded in the browser cache, and determine whether the target table identifier exists. If so, it indicates that the browser cache records the column width information of at least one candidate table, thereby obtaining the column width information corresponding to the above target table identifier, and using the table identified by the target table identifier corresponding to the above column width information as the target table corresponding to the column width information. In this way, the column width information and the target table corresponding to the column width information can be obtained by a common target table component, so that there is no need to develop table components for different tables to implement the above functions, thereby improving the efficiency of obtaining the target table.

[0052] Furthermore, the table identifier recorded in the browser cache includes: page path information. After step S201, it can also include: obtaining the current page path information carried in the current table identifier, and the target page path information of the target browser page; the current table identifier is any one of the table identifiers recorded in the browser cache; when the current page path information matches the target page path information, the current table identifier is used as a candidate table identifier.

[0053] In this embodiment, the table identifier recorded in the browser cache may carry page information of the browser page where the table is located. The table identifier may be composed of two parts: the page path where the table is located + the table name of the table. For example, if there are two tables tableA and tableB in the page path www.xxxx.com / somepath, then their table identifiers are somepath_tableA and somepath_tableB respectively, and the current table identifier refers to any one of the table identifiers recorded in the browser cache, and the current page path information refers to the page path information carried in the current table identifier.

[0054] Specifically, after the terminal obtains each table identifier recorded in the browser cache, it can use each table identifier as the current table identifier respectively, and determine whether the current page path information carried in each current table identifier matches the page path information of the target browser page, that is, the target page path information. If the current page path information matches the target page path information, the terminal can use the current table identifier as a candidate table identifier. In this way, the identification of the candidate table identifier can be completed.

[0055] In this embodiment, the table identifier recorded in the browser cache may carry page path information, so the terminal may identify the candidate table identifier from the table identifiers recorded in the browser cache through the page path information carried by the table identifier and the target page path information of the target browser page. This method may improve the efficiency of identifying the candidate table identifiers.

[0056] In addition, the column width information includes: the table columns to be adjusted contained in the target table, and the target column width values ​​corresponding to the table columns to be adjusted; step S102 may further include: adjusting the column width values ​​of the target table corresponding to the table columns to be adjusted to the target column width values.

[0057] In this embodiment, the column width information stored in the browser cache may also be composed of two parts, namely, the information of the table column to be adjusted, i.e., the table column to be adjusted, and the column width value corresponding to the table column, i.e., the target column width value. For example, Table A contains a name column, an age column, a gender column, etc., then the column width information may include: "Name": 240, indicating that the table column to be adjusted is the name column, and its corresponding target column width value is 240, "Age": 80, indicating that the table column to be adjusted is the age column, and its corresponding target column width value is 80, and the gender column is not recorded, indicating that the column width does not need to be adjusted. Therefore, when adjusting the column width of Table A as the target table, the column width value of the name column in Table A can be adjusted to 240, and the column width value of the age column in Table A can be adjusted to 80.

[0058] In this embodiment, the column width information recorded in the browser cache may include the table columns to be adjusted contained in the target table, and the target column width values ​​corresponding to the table columns to be adjusted. In this way, the column width values ​​of the target table corresponding to the table columns to be adjusted can be adjusted to the target column width values, thereby improving the efficiency of table column width adjustment.

[0059] In one embodiment, Figure 3 As shown, before step S101, the following may also be included:

[0060] Step S301 : in response to a column width adjustment operation on any candidate table, obtaining a candidate table corresponding to the column width adjustment operation and column width information corresponding to the column width adjustment operation.

[0061] The column width adjustment operation refers to the operation of adjusting the column width of the candidate table in the target browser page. In this embodiment, before the current access request is initiated to the target browser page, if a column width adjustment operation of the user for any candidate table in the target browser page is received, for example, the column width adjustment operation may be triggered during the last visit to the target browser page, the terminal may respond to the operation to obtain the candidate table corresponding to the column width adjustment operation, and the column width information corresponding to the column width adjustment operation, for example, the table column adjusted in the candidate table, and the column width value of the table column after adjustment.

[0062] Step S302: Recording the candidate table corresponding to the column width adjustment operation and the corresponding relationship between the column width information corresponding to the column width adjustment operation in the browser cache.

[0063] Afterwards, the candidate table corresponding to the column width adjustment operation and the correspondence between the column width information corresponding to the column width adjustment operation can be recorded in the browser cache, so that when the user visits the target browser page again, the display of the candidate table in the target browser page can be adjusted according to the correspondence between the candidate table corresponding to the column width adjustment operation and the column width information corresponding to the column width adjustment operation recorded in the browser cache.

[0064] For example, after the user opens the target browser page, if a column width adjustment operation is triggered for a table column of Table A in the target browser page, the terminal can obtain the table column adjusted by the column width adjustment operation and the column width value of the table column after adjustment as the column width information of the column width adjustment operation, and record the corresponding relationship between Table A and the column width information in the browser cache. Later, when the user visits the target browser page again, the column width of Table A can be adjusted according to the above corresponding relationship recorded in the browser cache, and the recorded column width information, and the adjusted Table A is displayed in the target browser page.

[0065] In this embodiment, when the user triggers the column width adjustment operation, the correspondence between the candidate table of the column width adjustment operation and the column width information can be recorded in the browser cache. In this way, it can be ensured that when the user visits the browser page again, the terminal can directly adjust the column width of the table according to the column width information, thereby improving the intelligence of the table display.

[0066] Furthermore, before step S301, the method may further include: monitoring a headerDragend event triggered for any candidate table through a pre-built target table component; and step S301 may further include: acquiring a candidate table in response to a headerDragend event triggered for any candidate table.

[0067] In this embodiment, in addition to being used to read the browser cache, the target table component can also be used to listen to the headerDragend event to complete the writing of the browser cache. The headerDragend event changes the width of the table column. When the user drags the table header and changes the table column width, the above headerDragend event will be triggered.

[0068] Therefore, the terminal can listen to the above headerDragend event through the pre-built target table component. If a candidate table in the target browser page triggers the above headerDragend event, it means that the user has triggered the column width adjustment operation on the header of the candidate table. At this time, the terminal can obtain the candidate table that triggered the headerDragend event, and the column width information corresponding to the candidate table, so as to store the correspondence between the above candidate table and the column width information in the browser cache.

[0069] In this embodiment, the headerDragend event triggered by any candidate table can also be monitored through the target table component to detect the user's column width adjustment operation. In this way, the column width adjustment operation and browser cache writing can be detected by the general target table component, and there is no need to develop table components for different tables to implement the above functions, thereby improving the efficiency of browser cache writing.

[0070] In one embodiment, Figure 4 As shown, the target table component can be constructed by following the steps below:

[0071] Step S401, create a Vue component, reference the table component of ElementUI in the Vue component, and pass the properties and events of the Vue component to the properties and events of the table component of ElementUI to obtain an initial table component.

[0072] Among them, Vue refers to a popular JavaScript framework for building modern Web applications. It adopts a componentized development approach, making the code more modular and more maintainable. Vue has a responsive data binding mechanism that keeps data and interface synchronized. ElementUI is a component library based on Vue.js, which provides a wealth of UI components and tools for quickly building modern Web applications. The ElementUI may include a table component, i.e., a table component, and the target table component used in this embodiment can be achieved by creating a Vue component and encapsulating and expanding the table component contained in the ElementUI.

[0073] Specifically, when building the target table component, the terminal can first create a Vue component, and can reference the ElementUI table component in the created Vue component, and pass the properties and events of the created Vue component through to the properties and events of the ElementUI table component to obtain the initial table component. At this time, the generated initial table component can inherit all the table functions of the ElementUI table component. When referencing the initial table component, it is equivalent to directly using the element-ui table component.

[0074] Step S402, add the first component running logic and the second component running logic to the initial table component to obtain the target table component; the first component running logic is used to realize reading the browser cache through the mounted life cycle function, and the second component running logic is used to realize monitoring the headerDragend event of the table, and when the headerDragend event is triggered, record the table and column width information corresponding to the headerDragend event.

[0075] After that, it is necessary to further add relevant functional logic to the initial table component to realize automatic adjustment of the table column width, so as to obtain the target table component. The added functional logic can include two parts, namely the first component operation logic and the second component operation logic, wherein the first component operation logic is mainly used to realize reading the browser cache through the mounted life cycle function, that is, to realize the acquisition of the table column width information and the target table, and the second component operation logic is used to realize the monitoring of the headerDragend event of the table, and when the headerDragend event is triggered, record the table and column width information corresponding to the headerDragend event, that is, to realize the detection of the table column width adjustment operation triggered by the user, and after the table column width adjustment operation is triggered, the table and column width information corresponding to the operation are recorded in the browser cache.

[0076] In this embodiment, the target table component is constructed by first creating a Vue component, referencing the table component of ElementUI in the created Vue component, and passing the properties and events of the Vue component to the properties and events of the table component of ElementUI. After obtaining the initial table component, the first component running logic and the second component running logic are added to the initial table component. In this way, the element-ui table component can be referenced through the target table component to replace the original table component of element-ui. By adding this function to the target table component, all tables will automatically have this function. There is no need to develop each table one by one, which greatly reduces the development cost.

[0077] In one embodiment, the table display method may further include: when the column width information of the candidate table is not recorded in the browser cache, obtaining initial column width information corresponding to the candidate table; the initial column width information includes the initial column width value of each table column in the candidate table; and displaying the candidate table in the target browser page according to the initial column width value of each table column in the initial column width information.

[0078] The initial column width information refers to the pre-set column width information, that is, the column width information that has not been adjusted by the user. The initial column width information may include the initial column width value of each table column in the candidate table. In this embodiment, if the column width information of the candidate table is not recorded in the browser cache, it indicates that the user has not adjusted the column width of the candidate table contained in the target browser page. In this case, the terminal can directly obtain the initial column width information corresponding to the candidate table contained in the target browser page, and display the candidate table according to the initial column width value of each table column in the initial column width information.

[0079] In this embodiment, if the column width information of the candidate table is not recorded in the browser cache, the terminal can directly obtain the initial column width information corresponding to the candidate table, and display the candidate table in the target browser page according to the initial column width value of each table column in the initial column width information. In this way, the stability of the display of the candidate table can be ensured.

[0080] In one embodiment, a method for recording the dragging of table column width based on element-ui is also provided. Currently, element-ui only provides the column width dragging function, but when the user revisits the page, the column width of the table is restored to the original width, and the width changed last time is not recorded, which causes the user to repeat the dragging operation. The method provided in this embodiment reads the last set column width and resets the column width for the column whose column width is changed by the user's dragging operation when the user enters the page next time.

[0081] Among them, the column (el-table-column) component of the table component of Element-ui provides a width attribute to set the width of a column. Users can also manually drag the header to change the width of the column. At the same time, the table component also provides a monitoring method for the header drag width, through which the column span and information before and after dragging the table can be obtained.

[0082] If you want to remember the drag width of the table, the general implementation method is to use variables to control the width of each column in the table where the element-ui table component is used. When the component is initialized, read the specific cache data from the cache, traverse and assign it to the table width variable, and add header-dragend event processing to record the column width after the user drags to the cache so that the column width can be set during the next initialization. The working principle flow can be as follows: Figure 5 As shown, it specifically includes the following steps, which can be achieved through the following four parts:

[0083] 1. Encapsulate the table component of element-ui.

[0084] Create a custom table component, reference the element-ui table component in the component, pass the properties and events of the custom table component to the element-ui table component, and then register the custom table component as a global component. External components referencing the custom table component are equivalent to directly using the element-ui table component. Adding functions to the custom table component is equivalent to expanding the global table function. The subsequent steps are also based on this. The component form of the custom table component can be as follows Figure 6 shown.

[0085] 2. Table width variable convention.

[0086] (1) Table variable name convention:

[0087] Since there are many pages in the web system, each page may have one or more tables. In order to distinguish the width data of each table, you need to agree on the variable name of each table in each page before starting, which will serve as the basis for reading the table width data later. The variable name of the table is agreed as follows:

[0088] Variable name = page path + table name

[0089] The table name is a name attribute passed to the custom table component. For example, if the page path www.xxxx.com / somepath has two tables, tableA and tableB, their variable names are somepath_tableA and somepath_tableB. If there is only one table on the page, the table name is optional because there will be no confusion with the data of other tables on the page. In short, the rule of storing the variable name of the table width is to distinguish the data of different table widths.

[0090] (2) Variable value convention:

[0091] Variable values ​​are only stored in the form of map key-value pairs, with the column name as the key and the width value as the value. For example, there are three columns in the table: name, age, and grade. The user drags these three columns to generate new widths, then the data recorded in the cache is: "Name": 240, "Age": 80, "Grade": 90.

[0092] 3. Initialize the table width.

[0093] In the life cycle of the custom table component mounted, read the cache data of the table width. If there is no cache record, do nothing. If there is a cache record, you can get all the column data of the table through this.$refs.table.$children. Then traverse all the columns, find the corresponding column and change its width, and then re-layout the table. The specific steps are as follows: Figure 7 shown.

[0094] exist Figure 7 Before changing the column width of a table, you need to know the column data structure of the table. You can change the width of the table list by changing the property value of columnConfig.width.

[0095] 4. Monitor and record changes in table column width.

[0096] In the custom table component, add the headerDragend event to the element-ui table component. When the user drags the width of the table column, the event will be triggered. The width after dragging and the dragged column information are obtained, and stored in the browser's LocalStorage in the form of key-value pairs. The specific steps are as follows: Figure 8 shown.

[0097] Through this embodiment, the element-ui table component can be encapsulated and expanded based on the element-ui framework. In this embodiment, for all element-ui tables used in the system, when the user drags the header of the table to change the column width of the table, the column width after dragging will be recorded in the browser's LocalStorage cache. After the page is closed and reopened or refreshed, the width of the table column will remain at the width after the last drag, without the user having to repeatedly drag the table, thereby improving the user experience. In addition, the element-ui table component can be referenced by a custom component to replace the original table component of element-ui. By adding this function to the custom table component, all tables will automatically have this function, without the need to develop each table one by one, greatly reducing the development cost. At the same time, this embodiment can store the table width data by the page path and table name, with the column name and width as the key-value pair, and dynamically obtain all the columns in the table by the custom table, to be compatible with all the tables of all pages in the web system, and there is no need to change the code when the table columns are added or changed, which has high maintainability and greatly reduces the complexity of the code.

[0098] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0099] Based on the same inventive concept, the embodiment of the present application also provides a table display device for implementing the table display method involved above. The implementation solution provided by the device to solve the problem is similar to the implementation solution recorded in the above method, so the specific limitations in one or more table display device embodiments provided below can refer to the limitations on the table display method above, and will not be repeated here.

[0100] In one embodiment, Fig. 9 As shown, a table display device is provided, including: a target table acquisition module 901 and a target table display module 902, wherein:

[0101] The target table acquisition module 901 is used to respond to the access request of the target browser page and acquire the target table corresponding to the column width information when the column width information of at least one candidate table is recorded in the browser cache; the column width information is obtained based on the historical column width adjustment operation record triggered on the target table; the candidate table is the table included in the target browser page;

[0102] The target table display module 902 is used to adjust the column width of the target table according to the column width information, and display the target table after the column width adjustment in the target browser page.

[0103] Each module in the above table display device can be implemented in whole or in part by software, hardware or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute operations corresponding to each module.

[0104] In one embodiment, a computer device is provided. The computer device may be a terminal, and its internal structure diagram may be as follows: Fig.10 As shown. The computer device includes a processor, a memory, an input / output interface, a communication interface, a display unit and an input device. The processor, the memory and the input / output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input / output interface. The processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The input / output interface of the computer device is used to exchange information between the processor and an external device. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner, and the wireless manner can be implemented through WIFI, a mobile cellular network, near field communication (NFC) or other technologies. When the computer program is executed by the processor, a table display method is implemented. The display unit of the computer device is used to form a visually visible picture, which can be a display screen, a projection device or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer device can be a touch layer covering the display screen, or a button, trackball or touchpad set on the computer device shell, or an external keyboard, touchpad or mouse.

[0105] Those skilled in the art will understand that Fig.10The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0106] In one embodiment, a computer device is further provided, including a memory and a processor, wherein a computer program is stored in the memory, and the processor implements the steps in the above method embodiments when executing the computer program.

[0107] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0108] In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0109] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant regulations.

[0110] A person of ordinary skill in the art can understand that all or part of the processes in the above-mentioned embodiment method can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile memory and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, an artificial intelligence (AI) processor, etc., but are not limited to this.

[0111] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this application.

[0112] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A table display method, characterized in that: The method comprises: In response to an access request of a target browser page, and in the case where column width information of at least one candidate table is recorded in a browser cache, obtaining a target table corresponding to the column width information; the column width information is obtained based on a historical column width adjustment operation record triggered on the target table; the candidate table is a table included in the target browser page; The column width of the target table is adjusted according to the column width information, and the target table after the column width adjustment is displayed on the target browser page.

2. The method according to claim 1, characterized in that The browser cache records the correspondence between multiple table identifiers and column width information; when the browser cache records the column width information of at least one candidate table included in the target browser page, obtaining the target table corresponding to the column width information includes: Read the browser cache through the mounted lifecycle function of the pre-built target table component to obtain the table identifier recorded in the browser cache; In the case where the table identifier of the record includes at least one candidate table identifier, obtaining column width information corresponding to each candidate table identifier; the candidate table identifier is a table identifier of a candidate table included in the target browser page; The tables identified by the candidate table identifiers corresponding to the respective column width information are used as the target tables corresponding to the respective column width information.

3. The method according to claim 2, characterized in that The table identifier recorded in the browser cache includes: page path information; after obtaining the table identifier recorded in the browser cache, the method further includes: Acquire the current page path information carried in the current table identifier and the target page path information of the target browser page; the current table identifier is any one of the table identifiers recorded in the browser cache; In the case where the current page path information matches the target page path information, the current table identifier is used as the candidate table identifier.

4. The method according to claim 2, characterized in that: The column width information includes: the table columns to be adjusted contained in the target table, and the target column width values ​​corresponding to the table columns to be adjusted; and adjusting the column widths of the target table according to the column width information includes: The column width value of the target table corresponding to the table column to be adjusted is adjusted to the target column width value.

5. The method according to claim 1, characterized in that In the case where the column width information of the candidate table included in the target browser page is recorded in the browser cache, before obtaining the target table corresponding to the column width information, the method further includes: In response to a column width adjustment operation for any of the candidate tables, acquiring the candidate table corresponding to the column width adjustment operation and column width information corresponding to the column width adjustment operation; The candidate table corresponding to the column width adjustment operation and the corresponding relationship between the column width information corresponding to the column width adjustment operation are recorded in the browser cache.

6. The method according to claim 5, characterized in that Before responding to the column width adjustment operation for any of the candidate tables, the method further includes: Listening to the headerDragend event triggered for any candidate table through a pre-built target table component; In response to a column width adjustment operation on any candidate table, obtaining a candidate table corresponding to the column width adjustment operation includes: In response to a headerDragend event triggered for any of the candidate tables, the candidate table is obtained.

7. The method according to claim 2 or 6, characterized in that: The target table component is constructed by the following steps: Create a Vue component, reference the table component of ElementUI in the Vue component, and pass the properties and events of the Vue component to the properties and events of the table component of ElementUI to obtain an initial table component; Add the first component running logic and the second component running logic to the initial table component to obtain the target table component; the first component running logic is used to realize reading the browser cache through the mounted life cycle function, and the second component running logic is used to realize monitoring the headerDragend event of the table, and when the headerDragend event is triggered, record the table and column width information corresponding to the headerDragend event.

8. The method according to claim 1, characterized in that The method further comprises: In the case that the column width information of the candidate table is not recorded in the browser cache, obtaining initial column width information corresponding to the candidate table; the initial column width information includes an initial column width value of each table column in the candidate table; The candidate table is displayed in the target browser page according to the initial column width value of each of the table columns in the initial column width information.

9. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the method according to any one of claims 1 to 8 are implemented.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 8 are implemented.

Images