Meter multifunctional processing method, system and equipment and medium

Abstract

The invention provides a multifunctional header processing method, system and device and a medium, and belongs to the technical field of user interface design, the method comprises the following steps: introducing an Ant Design Vue component library in a Vue project, creating a Vue page containing a Table component, and initializing the Table component and a column configuration array colomns; configuring a sorting function and a user-defined slot for the target column; in the template of the Table component, the custom content is inserted through a slot mechanism of Vue; when a user clicks the target list header area, acquiring a clicking position through the event object; if the target column is a text area, triggering a built-in sorting logic of Vue, and executing a sorting function to sort table data of the target column; and if the click event is in the icon area, calling a click event processing function, and executing a self-defined target operation. According to the method, sorting, screening and user-defined operation are integrated, space utilization is optimized, and performance and user experience are improved.

Description

TECHNICAL FIELD

[0001] The application belongs to the technical field of user interface design, and particularly relates to a table header multifunction processing method, system, device and medium. BACKGROUND

[0002] In the field of Web development, table components serve as the core tool for data display, and the design of their functions has a significant impact on user experience and interface simplicity. In existing Web table components (such as Element UI, Bootstrap Table), the table header function often has the following defects, such as Element UI, Bootstrap Table, and Ant Design Vue, which have the following common defects in table header function design that need to be solved urgently: Firstly, in traditional table components, sorting operations usually require users to click on the table header text area to trigger, while filtering functions rely on independent funnel icons or other specialized filtering buttons. This scattered design of functions greatly increases the cognitive burden on users when performing data sorting and filtering operations, as they need to click on different areas of the table header. Secondly, to accommodate the operation icons required by sorting and filtering functions, each table header needs to reserve additional display areas. When the number of table columns exceeds 10, these additional reserved spaces significantly compress the effective data display area, greatly limiting the usability and readability of the table when displaying large amounts of data. Finally, existing table components cannot accurately distinguish between sorting clicks (text area) and custom operations (icon area) within the same table header area, resulting in developers having to develop complex event proxy logic, which not only increases development difficulty and maintenance costs, but also may cause delays or instability in operation responses, affecting user experience. SUMMARY

[0003] In a first aspect, the embodiments of the present application provide a table header multifunction processing method, including the following steps: S1. Import the Ant Design Vue component library into the Vue project, create a Vue page containing the Table component, and initialize the Table component and the column configuration array columns; S2. Configure sorting functions and custom slots for the target column of the Vue page: Set the sorter attribute to the sorting function in the column description object of the column configuration array columns of the target column to complete the sorting function configuration; Set the scopedSlots attribute to the object in the column description object of the column configuration array columns of the target column to customize the filter menu slot name and icon slot name, and complete the custom slot configuration; S3. In the template of the Table component, insert custom content through the slot mechanism of Vue: Insert a custom filter component with input box and operation button, and associate the custom filter component with the filter menu slot name; Insert a custom icon, associate the custom icon with the icon slot name, and bind it with a click event handling function; the click event handling function customizes the target operation; S4. When the user clicks on the target list header area, get the click position through the event object; If the click position is the text area, trigger the built-in sorting logic of Ant Design Vue, and execute the sorting function to sort the table data of the target column; If the click position is the icon area, call the click event handling function to execute the customized target operation.

[0004] Further, the specific steps of step S1 are as follows: S11. Create a Vue single file component and import the CSS style file and JS module of Ant Design Vue; S12. Declare the table data source array dataSource in the data attribute of the Vue single file component; S13. Initialize the column configuration array columns, and set the column title title, data field dataIndex, and unique identifier key attribute for each column; S14. In the template of the Table component, insert <a-table>The component binds the table data source array dataSource and the column configuration array columns properties.

[0005] Further, the step S2 includes the following steps: S21. Declare sorting logic through the sorter property, and set sorting functions for numerical data columns, date data columns, and text data columns respectively; S22. Declare custom slots containing menu slot names, icon slot names, and current column data field names through the scopedSlots property.

[0006] Further, the step S3 includes the following steps: S31. In the template of the Table component, use the slot syntax of Vue to insert a custom filter menu for each target column; the custom filter menu includes an input box for receiving user input filter conditions and at least one operation button for triggering filtering or resetting operations; S32. In the template of the Table component, use the slot syntax of Vue to insert a custom icon for each target column, which is associated with the icon slot name defined in the column configuration array columns; S33. Bind the click event of the custom icon to a custom event handling function, which is used to perform custom operations related to the current column.

[0007] Further, the custom operations include the overall operation flow of data extraction, data analysis, and data display.

[0008] Further, the step S4 includes the following steps: S41. When the user clicks on the table header area, obtain the horizontal offset of the click position relative to the top-left corner of the table header element through the browser event object; S42. Calculate the width of the table header text area, which is obtained by measuring the rendered width of the table header title text plus a preset inner margin compensation value; S43. Compare the horizontal offset with the width of the table header text area; If the horizontal offset is less than or equal to the width of the text area, it is determined that the text area is clicked, triggering the built-in sorting logic; If the horizontal offset is greater than the width of the text area, it is determined that the icon area is clicked, triggering the custom event handling function.

[0009] Further, it also includes an optimization processing step: S5. Optimize event response: The sorting click event of the table header text area is added with a debounce processing, a debounce delay time is set as a first time period, and a plurality of sorting operations caused by continuous clicks in the first time period are prevented; The input event of the input box in the filtering menu is added with a debounce processing, a debounce delay time is set as a second time period, and data filtering is performed on input triggers in the second time period; The click event of the custom icon is kept with an instant response, and no debounce processing is added.

[0010] In a second aspect, the embodiments of the present application further provide a table header multifunctional processing system, comprising: An environment configuration module is configured to introduce an Ant Design Vue component library into a Vue project, create a Vue page containing a Table component, and initialize a Table component and a column configuration array columns; A column configuration module is configured to configure a sorting function and a custom slot for a target column of the Vue page: A sorter attribute is set as a sorting function in a column description object of the column configuration array columns of the target column, so as to complete the sorting function configuration; A scopedSlots attribute is set as an object in the column description object of the column configuration array columns of the target column, so as to customize a filtering menu slot name and an icon slot name, and complete the custom slot configuration; A slot rendering module is configured to insert custom content into a template of the Table component through a slot mechanism of Vue: A custom filtering component with an input box and an operation button is inserted, and the custom filtering component is associated with the filtering menu slot name; A custom icon is inserted, the custom icon is associated with the icon slot name, and is bound with a click event processing function; the click event processing function is configured to customize a target operation; An event processing module is configured to obtain a click position through an event object when a user clicks a target table header area; If the click position is a text area, built-in sorting logic of Ant Design Vue is triggered to execute a sorting function to sort table data of a target column; If the click position is an icon area, a click event processing function is called to execute a customized target operation.

[0011] In a third aspect, the embodiments of the present application further provide an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the steps of the table header multifunctional processing method of the first aspect.

[0012] Fourthly, embodiments of this application also provide a storage medium storing a computer program thereon, which, when executed by a processor, implements the steps of the header multi-function processing method described in the first aspect.

[0013] As can be seen from the above technical solutions, this application has the following advantages: The multi-functional header processing method, system, device, and medium provided in this application improve the user experience and interface simplicity of table components by integrating sorting, filtering, and custom operation functions into the header; reduce the dispersion of user operation areas, lower the cognitive burden on users, and improve interface simplicity; simultaneously, through a coordinate event diversion algorithm, it accurately distinguishes between sorting clicks and custom operations, avoiding event conflicts and improving the accuracy and stability of operation response. Furthermore, through debouncing and throttling mechanisms, event response is optimized, unnecessary operations and data redrawing are reduced, and table performance and response speed are improved. Attached Figure Description

[0014] To more clearly illustrate the technical solution of this application, the accompanying drawings used in the description will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0015] Figure 1 This is a flowchart illustrating the multi-functional processing method for the header of the present invention.

[0016] Figure 2 This is a schematic diagram of the multi-functional processing system for the meter header of the present invention. Detailed Implementation

[0017] The various embodiments of this disclosure will be described more fully in the detailed steps of the header multi-functional processing method described below. This disclosure may have various embodiments, and adjustments and changes may be made therein. However, it should be understood that there is no intention to limit the various embodiments of this disclosure to the specific embodiments disclosed herein, but rather this disclosure should be understood to cover all adjustments, equivalents, and / or alternatives falling within the spirit and scope of the various embodiments of this disclosure.

[0018] For example, in web development, table components are important tools for data display, and their functional design directly affects user experience and interface simplicity. However, existing mainstream web table components (such as Element UI, BootstrapTable, and Ant Design Vue) have some common problems in the design of table header functionality that urgently need to be addressed: First, traditional table components typically bind sorting functionality to click events in the header text area, while filtering is triggered by separate funnel icons or other dedicated filter buttons. This fragmented design requires users to interact with different areas of the header, increasing cognitive load and operational complexity. Second, to accommodate the icons needed for sorting and filtering within the header, each header needs to reserve additional display area. When the table has many columns (e.g., more than 10), this extra space significantly compresses the display area for valid data, limiting usability and readability when displaying large amounts of data. Finally, existing table components cannot accurately distinguish between sorting clicks (text area) and custom actions (icon area) within the same header area. This forces developers to create complex event delegate logic to handle these events, increasing development difficulty and maintenance costs, and potentially leading to delayed or unstable response times, thus impacting user experience.

[0019] To address the aforementioned issues, this embodiment provides a multi-functional header processing method that integrates sorting, filtering, and customization functions into the header, reducing the dispersion of operation areas, lowering the cognitive burden on users, and improving the simplicity and ease of operation of the interface.

[0020] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0021] Please see Figure 1 The diagram shows a flowchart of a multi-functional header processing method in a specific embodiment. The method includes the following steps: S1. Import the Ant Design Vue component library into the Vue project, create a Vue page containing a Table component, and initialize the Table component and the column configuration array (columns); It should be noted that introducing the Ant Design Vue component library into the Vue project provides rich functionality and style support for the table component; creating a Vue page containing the Table component and initializing the Table component and the column configuration array provides the foundation for subsequent table header configuration; S2. Configure sorting functionality and custom slots for the target column of the Vue page: In the column description object of the column configuration array of the target column, set the sorter property to the sorting function to complete the sorting function configuration; Set the scopedSlots attribute to an object in the column description object of the column configuration array columns of the target column, customize the filter menu slot name and the icon slot name, and complete the custom slot configuration; It should be noted that by setting the sorter attribute to the sorting function, the table column can support sorting operations, improving the data processing capability of the table; by setting the scopedSlots attribute, the custom slot is configured for the table header, providing extensibility for subsequent custom operations; S3. In the template of the Table component, insert custom content through the slot mechanism of Vue: Insert a custom filter component with an input box and operation buttons, and associate the custom filter component with the filter menu slot name; Insert a custom icon, associate the custom icon with the icon slot name, and bind it with a click event handling function; the click event handling function customizes the target operation; It should be noted that by inserting a custom filter component with an input box and operation buttons through the slot mechanism of Vue, the visualization of the filtering function is achieved, improving the convenience of user operation; by inserting a custom icon and binding it with a click event handling function, the user can trigger a custom operation by clicking the icon, enhancing the functionality of the table header; S4. When the user clicks on the target table header area, get the click position through the event object; If the click position is the text area, trigger the built-in sorting logic of Ant Design Vue to execute the sorting function to sort the table data of the target column; If the click position is the icon area, call the click event handling function to execute the custom target operation; It should be noted that by obtaining the click position and performing coordinate comparison, the sorting click and custom operation are accurately distinguished, avoiding event conflicts and improving the accuracy and stability of operation response.

[0022] This embodiment integrates sorting function and custom slot to realize multi-functional operation of the table header, reduces the dispersion of user operation area, reduces user cognitive burden, and improves interface simplicity.

[0023] Further, as a refinement and extension of the above embodiment, in order to fully describe the specific implementation process in this embodiment, another multi-functional processing method of table header is provided, which includes the following steps: S1. Import the Ant Design Vue component library in the Vue project, create a Vue page containing the Table component, and initialize the Table component and the column configuration array columns; The specific steps of step S1 are as follows: S11. Create a Vue single file component and import the CSS style file and JS module of Ant Design Vue; S12. Declare the table data source array dataSource in the data attribute of the Vue single file component; S13. Initialize the column configuration array columns, and set the column title title, data field dataIndex, and unique identifier key attribute for each column; S14. Insert <a-table>The component binds the table data source array dataSource and the column configuration array columns attributes; S2. Configure the sorting function and custom slots for the target columns of the Vue page: Set the sorter attribute to the sorting function in the column description object of the column configuration array columns of the target column to complete the sorting function configuration; Set the scopedSlots attribute to an object in the column description object of the column configuration array columns of the target column to customize the filter menu slot name and icon slot name, and complete the custom slot configuration; The specific steps of step S2 are as follows: S21. Declare the sorting logic through the sorter attribute, and set the sorting function for numerical data columns, date data columns, and text data columns respectively: Specifically, for numerical data columns, set the sorting function: sorter:(a,b)=>a[dataIndex]-b[dataIndex] For date data columns, set the sorting function: sorter:(a,b)=>new Date(a[dataIndex])-new Date(b[dataIndex]) For text data columns, set the sorting function: sorter:(a,b)=>a[dataIndex].localeCompare(b[dataIndex]); S22. Declare the custom slot containing the menu slot name, icon slot name, and data field name of the current column through the scopedSlots attribute; S3. In the template of the Table component, insert custom content through the slot mechanism of Vue: Insert a custom filter component with an input box and operation buttons, and associate the custom filter component with the filter menu slot name; Insert a custom icon, associate the custom icon with the icon slot name, and bind it with a click event handling function; the click event handling function customizes the target operation; The specific steps of step S3 are as follows: S31. In the template of the Table component, use the slot syntax of Vue to insert a custom filter menu for each target column; the custom filter menu contains an input box and at least one operation button, the input box is used to receive the user input filter condition, and the operation button is used to trigger the filter or reset operation; S32. In the template of the Table component, use Vue's slot syntax to insert a custom icon for each target column, the custom icon being associated with an icon slot name defined in the column configuration array columns; S33. Bind the click event of the custom icon to a custom event handler function, wherein the custom event handler function is used to perform custom operations related to the current column; The customized operation includes the overall operation process of data extraction, data analysis, and data display; Specifically, data extraction involves extracting all data values ​​of the current column from the table data source, and then performing format conversion and cleaning according to the data type; Data analysis involves performing statistical calculations on numerical data, word frequency analysis on text data, and time distribution statistics on date data. The data visualization chart is generated by selecting the chart type based on the data type, generating chart configuration parameters, and then rendering the data visualization chart in the modal window. S4. When a user clicks on the header area of ​​the target list, the click location is obtained through the event object; If the clicked location is a text area, the built-in sorting logic of Ant Design Vue is triggered, and the sorting function is executed to sort the table data in the target column; If the clicked location is an icon area, call the click event handler function to execute the custom target operation; The specific steps of step S4 are as follows: S41. When a user clicks on the header area, obtain the horizontal offset of the click position relative to the top left corner of the header element through the browser event object; S42. Calculate the width of the header text area, which is obtained by measuring the rendering width of the header title text and adding a preset inner margin compensation value; S43. Compare the horizontal offset with the width of the header text area; If the horizontal offset is less than or equal to the width of the text area, it is determined that the text area has been clicked, triggering the built-in sorting logic; If the horizontal offset is greater than the width of the text area, it is determined that the icon area has been clicked, and the custom event handler function is triggered. It also includes optimizing processing steps: S5. Optimize event response: Add debouncing to the sorting click event of the header text area, and set the debouncing delay time to the first time period to prevent continuous clicks within the first time period from causing several sorting operations. Add debouncing to the input event of the input box in the filter menu, set the debouncing delay time to the second time period, and filter the data triggered by input within the second time period; The click event of the custom icon remains instant response without adding a debounce process.

[0024] It should be understood that the size of the serial number of each step in the above embodiment does not mean the order of execution, and the execution order of each process should be determined according to its function and inherent logic, and should not constitute any limitation on the implementation process of the embodiment of the application.

[0025] As Figure 2 shown, the following is an embodiment of a table header multifunction processing system provided by the embodiment of the present disclosure. The system and the table header multifunction processing method described above belong to the same inventive concept. Details not described in the embodiment of the table header multifunction processing system can be referred to the embodiment of the table header multifunction processing method described above.

[0026] The system comprises: An environment configuration module, configured to introduce an Ant Design Vue component library in a Vue project, create a Vue page containing a Table component, and initialize the Table component and a column configuration array columns; A column configuration module, configured to configure a sorting function and custom slots for a target column of the Vue page: Set the sorter attribute to the sorting function in the column description object of the column configuration array columns of the target column to complete the sorting function configuration; Set the scopedSlots attribute to an object in the column description object of the column configuration array columns of the target column to customize the filter menu slot name and the icon slot name, and complete the custom slot configuration; A slot rendering module, configured to insert custom content into a template of the Table component through a slot mechanism of Vue: Insert a custom filter component with an input box and an operation button, and associate the custom filter component with the filter menu slot name; Insert a custom icon, associate the custom icon with the icon slot name, and bind the custom icon with a click event processing function; the click event processing function customizes a target operation; An event processing module, configured to obtain a click position through an event object when a user clicks a target table header area; If the click position is a text area, trigger the built-in sorting logic of Ant Design Vue to execute the sorting function to sort table data of the target column; If the click position is an icon area, call the click event processing function to execute the customized target operation.

[0027] The embodiment is realized through the interaction and cooperation of the environment configuration module, the column configuration module, the slot rendering module, and the event processing module.

[0028] The table header multifunction processing method provided by the embodiments of the present application can be applied to an electronic device. Those skilled in the art can understand that the structure of the electronic device involved in the embodiments of the present application does not constitute a limitation on the electronic device, and the electronic device can include more or fewer components than the illustration, or combine certain components, or different component arrangements. In the embodiments of the present application, the electronic device includes but is not limited to a laptop computer, a desktop computer, a workstation, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as a personal digital processor, a cellular phone, a smart phone, a wearable device, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are merely examples, and are not intended to limit the implementation of the embodiments of the present application described herein and / or claimed.

[0029] The electronic device can include a processor, an external memory interface, an internal memory, a universal serial bus (USB) interface, a charging management module, a power management module, a battery, a wireless communication module, an audio module, a speaker, a microphone, a sensor module, a key, a camera, a display screen, and a SIM card interface, etc.

[0030] It can be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device. In other embodiments of the present application, the electronic device can include more or fewer components than the illustration, or combine certain components, or split certain components, or different component arrangements. The illustrated components can be implemented in hardware, software, or a combination of software and hardware.

[0031] The processor can include one or more processing units, such as: the processor can include a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units can be independent devices, or can be integrated in one or more processors.

[0032] The processor can be the nerve center and command center of the electronic device. The controller can generate operation control signals according to instruction operation codes and timing signals, and complete the control of instruction fetching and instruction execution.

[0033] The memory in the processor can also be configured to store instructions and data. In some embodiments, the memory in the processor is a cache memory. The memory can store instructions or data that the processor has just used or repeatedly used. If the processor needs to use the instructions or data again, it can directly call from the memory. Avoiding repeated access reduces the waiting time of the processor, thereby improving the efficiency of the system.

[0034] The electronic device realizes the header multifunctional processing method in the Vue project, introduces the Ant Design Vue component library, creates a Vue page containing a Table component, initializes the Table component and the column configuration array columns, configures the sorting function and the custom slot for the target column of the Vue page, sets the sorter attribute of the column description object in the column configuration array columns of the target column to the sorting function, completes the sorting function configuration, sets the scopedSlots attribute of the column description object in the column configuration array columns of the target column to an object, customizes the filter menu slot name and the icon slot name, and completes the custom slot configuration, inserts custom content in the template of the Table component through the slot mechanism of Vue, inserts a custom filtering component with an input box and an operation button, and associates the custom filtering component with the filter menu slot name, inserts a custom icon, associates the custom icon with the icon slot name, and binds the custom icon with a click event handling function, the click event handling function customizes the target operation, when a user clicks the target table header area, obtains the click position through an event object, if the click position is a text area, triggers the built-in sorting logic of Ant Design Vue, and executes the sorting function to sort the table data of the target column, if the click position is an icon area, calls the click event handling function, and executes the technical solution of the customized target operation, so that the sorting, filtering and custom operation functions are integrated in the table header, the dispersion of the operation area is reduced, the user cognitive burden is reduced, and the interface simplicity is improved.

[0035] In the storage medium provided in the application, a program product capable of realizing the header multifunctional processing method is stored.

[0036] The table header multifunction processing method includes: introducing an Ant Design Vue component library in a Vue project, creating a Vue page containing a Table component, and initializing the Table component and a column configuration array columns; configuring a sorting function and a custom slot for a target column of the Vue page: setting a sorter attribute as a sorting function in a column description object of the column configuration array columns of the target column to complete the sorting function configuration; setting a scopedSlots attribute as an object in the column description object of the column configuration array columns of the target column to customize a filter menu slot name and an icon slot name, and complete the custom slot configuration; inserting custom content in a template of the Table component through a slot mechanism of Vue: inserting a custom filter component with an input box and an operation button, and associating the custom filter component with the filter menu slot name; inserting a custom icon, associating the custom icon with the icon slot name, and binding with a click event processing function; the click event processing function customizes a target operation; when a user clicks a target table header area, a click position is obtained through an event object; if the click position is a text area, built-in sorting logic of Ant Design Vue is triggered to execute a sorting function to sort table data of the target column; if the click position is an icon area, the click event processing function is called to execute the customized target operation.

[0037] In some possible implementations, the table header multifunction processing method of the present disclosure can be implemented in the form of a program product, which includes program codes for causing a terminal device to perform the steps according to various exemplary embodiments of the present disclosure described in the above "Exemplary Method” section of the present specification when the program product is run on the terminal device.

[0038] The storage medium of the present disclosure can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium may, for example, be but is not limited to an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or apparatus, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection having one or more wires, a portable disc, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0039] The foregoing description of the disclosed embodiments enables a person skilled in the art to make or use the application. Modifications of these embodiments will occur to persons of skill in the art, and that the appended claims are intended to cover all such modifications that do not depart from the true spirit and scope of the application. Therefore, the application is not limited to the embodiments shown but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for multi-function processing of a meter head, characterized by, The method comprises the following steps: S1. Introducing the Ant Design Vue component library in the Vue project, creating a Vue page containing the Table component, and initializing the Table component and the column configuration array columns; S2. Configuring the sorting function and custom slots for the target column of the Vue page: Set the sorter attribute to the sorting function in the column description object of the column configuration array columns of the target column to complete the sorting function configuration; Set the scopedSlots attribute to an object in the column description object of the column configuration array columns of the target column to customize the filter menu slot name and the icon slot name, and complete the custom slot configuration; S3. In the template of the Table component, insert custom content through the slot mechanism of Vue: Insert a custom filter component with an input box and operation buttons, and associate the custom filter component with the filter menu slot name; Insert a custom icon, associate the custom icon with the icon slot name, and bind it with a click event handling function; the click event handling function customizes the target operation; S4. When the user clicks on the target list header area, the click position is obtained through the event object; If the click position is a text area, trigger the built-in sorting logic of Ant Design Vue to execute the sorting function to sort the table data of the target column; If the click position is an icon area, call the click event handling function to execute the customized target operation.

2. The table head multi-function processing method according to claim 1, wherein The specific steps of step S1 are as follows: S11. Create a Vue single file component and import the CSS style file and JS module of Ant Design Vue; S12. Declare the table data source array dataSource in the data attribute of the Vue single file component; S13. Initialize the column configuration array columns, and set the column title title, data field dataIndex, and unique identifier key attribute for each column; S14. Inserting in the template of the Table component <a-table>Bind the table data source array dataSource and the column configuration array columns attribute.

3. The table header multi-function processing method of claim 2, wherein, The specific steps of step S2 are as follows: S21. Declare the sorting logic through the sorter attribute, and set the sorting function for the numerical data column, the date data column, and the text data column respectively; S22. Declare the custom slot containing the menu slot name, the icon slot name, and the data field name of the current column through the scopedSlots attribute.

4. The table head multi-function processing method according to claim 3, wherein, The specific steps of step S3 are as follows: S31. In the template of the Table component, use the slot syntax of Vue to insert a custom filter menu for each target column; the custom filter menu includes an input box and at least one operation button, the input box is used to receive the user input filter condition, and the operation button is used to trigger the filter or reset operation; S32. In the template of the Table component, use the slot syntax of Vue to insert a custom icon for each target column, and the custom icon is associated with the icon slot name defined in the column configuration array columns; S33. Binding the click event of the custom icon to a custom event handling function, which is used to perform a custom operation related to the current column.

5. The table head multi-function processing method according to claim 4, wherein, The custom operation includes the overall operation process of data extraction, data analysis and data display.

6. The table head multi-function processing method according to claim 4, wherein, The specific steps of step S4 are as follows: S41. When the user clicks on the table header area, the horizontal offset of the click position relative to the top left corner of the table header element is obtained through the browser event object; S42. Calculate the width of the table header text area, which is obtained by measuring the rendered width of the table header title text plus a preset inner margin compensation value; S43. Compare the horizontal offset with the width of the table header text area; If the horizontal offset is less than or equal to the width of the text area, it is determined that the text area is clicked, and the built-in sorting logic is triggered; If the horizontal offset is greater than the width of the text area, it is determined that the icon area is clicked, and the custom event handling function is triggered.

7. The table head multi-function processing method according to claim 6, wherein, It also includes an optimization processing step: S5. Optimize the event response: Add a debounce process to the sorting click event of the table header text area, set the debounce delay time to the first time period, and prevent continuous clicking within the first time period from causing several sorting operations; Add a debounce process to the input event of the input box in the filter menu, set the debounce delay time to the second time period, and filter the data triggered by the input within the second time period; The click event of the custom icon remains responsive and does not add a debounce process.

8. A table head multi-function processing system characterized by comprising: It includes: An environment configuration module for importing the Ant Design Vue component library in the Vue project, creating a Vue page containing the Table component, and initializing the Table component and the column configuration array columns; A column configuration module for configuring sorting functions and custom slots for target columns in the Vue page: Set the sorter attribute to the sorting function in the column description object of the target column in the column configuration array columns to complete the sorting function configuration; Set the scopedSlots attribute to an object in the column description object of the target column in the column configuration array columns to customize the filter menu slot name and the icon slot name, and complete the custom slot configuration; A slot rendering module for inserting custom content into the template of the Table component through the slot mechanism of Vue: Insert a custom filter component with an input box and operation buttons, and associate the custom filter component with the filter menu slot name; Insert a custom icon, associate the custom icon with the icon slot name, and bind it with a click event handling function; the click event handling function customizes the target operation; An event handling module for obtaining the click position when the user clicks on the target table header area through the event object; If the click position is a text area, trigger the built-in sorting logic of Ant Design Vue to sort the table data of the target column by executing the sorting function; If the click position is an icon area, call the click event handling function to perform the custom target operation.

9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The processor implements the steps of the table header multifunctional processing method of any one of claims 1 to 7 when executing the program. The processor implements the steps of the table header multifunctional processing method of any one of claims 1 to 7 when executing the program.

10. A storage medium having stored thereon a computer program, characterized in that The computer program, when executed by a processor, implements the steps of the header multifunction processing method according to any one of claims 1 to 7.

Images