Combined use method and system of a-tree and a-transfer components

Abstract

The invention relates to the technical field of Web front ends, and particularly provides a combined use method and system for an a-tree component and an a-transfer component, and the method comprises the following steps: S1, introducing an Ant Design Vue library into a vue framework; s2, an a-transfder control instance is created; s3, creating an a-tree control instance; and S4, linkage is carried out on the a-tree control and the a-transfer control, and bidirectional binding and interaction of data are realized through an event monitoring and callback function. Compared with the prior art, the system can realize an efficient and easy-to-use data management and transmission solution, and has a wide application prospect and a huge market value.

Description

Technical Field

[0001] The present invention relates to the technical field of Web front-end, and specifically provides a method and system for jointly using a-tree and a-transfer components. Background Art

[0002] The Ant Design Vue library provides a wealth of UI components, such as buttons, forms, tables, charts, etc., which can meet the needs of various application scenarios.

[0003] The components of the Ant Design Vue library are easy to use and provide detailed documentation and examples to help developers get started quickly.

[0004] The components of the Ant Design Vue library support custom styles and attributes to meet personalized design needs.

[0005] First, with the development of business, data management needs are becoming more and more diversified, requiring more flexible and efficient data management tools; second, users have higher and higher requirements for the experience of data management tools, requiring easier-to-use and more intuitive data management tools; third, developers need more efficient and easier-to-use development tools to quickly build feature-rich Web front-end applications.

[0006] Existing solutions often only support a-tree or a-transfer controls. However, in actual applications, users often need to use both controls at the same time to meet complex business needs. The current solutions on the market have not yet effectively combined the two controls, resulting in inconvenience and low efficiency for users. In modern Web applications, data display and operation are crucial. Existing solutions lack data interaction functions and cannot meet users' needs for flexible data operation. Summary of the invention

[0007] The present invention aims at solving the above-mentioned deficiencies of the prior art and provides a method for combining the a-tree and a-transfer components with strong practicability.

[0008] A further technical task of the present invention is to provide a device for the combined use of a-tree and a-transfer components that is rationally designed, safe and applicable.

[0009] The technical solution adopted by the present invention to solve the technical problem is:

[0010] The combined use of a-tree and a-transfer components has the following steps:

[0011] S1. Introduce Ant Design Vue library into the Vue framework;

[0012] S2. Create an a-transfder control instance;

[0013] S3. Create an a-tree control instance;

[0014] S4. Link the a-tree and a-transfer controls to achieve two-way binding and interaction of data through event monitoring and callback functions.

[0015] Furthermore, in step S1, it includes:

[0016] (1) Install the Ant Design Vue library;

[0017] npminstall ant-design-vue@next;

[0018] (2) Completely import Ant Design Vue and its styles into the entry file main.js;

[0019] import Antd from'ant-design-vue'

[0020] import'ant-design-vue / dist / antd.css'

[0021] app.use(Antd).

[0022] Furthermore, in step S2, the a-transfer control of the Ant Design Vue library is used to bind the data source on the left side of the shuttle box through the data attribute dataSource, and the showSearch attribute is configured to enable the search function, the titles attribute is displayed with custom titles, the render attribute is used to define the rendering logic for each row of data, and the search event callback function is used to respond to changes in the content of the search box, providing an intuitive and interactive data filtering and transfer interface.

[0023] Furthermore, in step S3, the a-tree control of the Ant Design Vue library is used to bind the tree data source through the data attribute treeData, and the defaultExpandAll attribute is configured to implement the default expansion function. The checkable attribute supports node selection, and the check event and select event callback functions are used to process node selection and click operations, thereby realizing data management and operation.

[0024] The joint use system of a-tree and a-transfer components. First, introduce the Ant DesignVue library into the Vue framework, and create a-transfer control instance and a-tree control instance;

[0025] Then, the a-tree and a-transfer controls are linked to achieve two-way binding and interaction of data through event monitoring and callback functions.

[0026] Furthermore, when the Ant Design Vue library is introduced into the Vue framework, it includes:

[0027] (1) Install the Ant Design Vue library;

[0028] npminstall ant-design-vue@next;

[0029] (2) Completely import Ant Design Vue and its styles into the entry file main.js;

[0030] import Antd from'ant-design-vue'

[0031] import'ant-design-vue / dist / antd.css'

[0032] app.use(Antd).

[0033] Furthermore, the a-transfer control of the Ant Design Vue library is used to bind the data source on the left side of the shuttle box through the data attribute dataSource, and the showSearch attribute is configured to enable the search function, the titles attribute is displayed with custom titles, the render attribute is used to define the rendering logic for each row of data, and the search event callback function is used to respond to changes in the content of the search box, providing an intuitive and interactive data filtering and transfer interface.

[0034] Furthermore, the a-tree control of the Ant Design Vue library is used to bind the tree data source through the data attribute treeData, and the defaultExpandAll attribute is configured to implement the default expansion function. The checkable attribute supports node selection, and the check event and select event callback functions are used to handle node selection and click operations, thereby realizing data management and operation.

[0035] Compared with the prior art, the combined use method and system of the a-tree and a-transfer components of the present invention has the following outstanding beneficial effects:

[0036] (1) Improve data management efficiency:

[0037] Quickly locate data: Users can quickly locate the required data through the tree control without having to filter and search through huge data sets.

[0038] Flexible data manipulation: Users can use the shuttle box to flexibly filter, sort, group and transfer data, making it easier to organize and analyze data.

[0039] Batch operation of data: Users can perform batch operations on the data in the shuttle box, such as batch modification, batch deletion, etc., to improve the efficiency of data operation.

[0040] (2) Improve user experience:

[0041] Intuitive data display: The combination of a-tree and a-transfer controls can display data in tree structure and list form, making it easier for users to understand and operate.

[0042] Convenient data operations: a-tree and a-transfer controls provide a variety of operation functions, such as expansion, folding, selection, search, etc., to facilitate users to perform data operations.

[0043] Good interactive experience: The data interaction between a-tree and a-transfer controls is smooth and natural, and the user experience is comfortable.

[0044] (3) Reduce development costs:

[0045] Rapid development: Based on the Ant Design Vue library, you can quickly build a feature-rich, easy-to-maintain Web front-end application to reduce development costs.

[0046] Code reuse: a-tree and a-transfer controls can be reused in different projects to improve development efficiency.

[0047] (4) Improve data security:

[0048] Permission control: According to the user's permissions, you can control the display and operation of nodes in the tree control, as well as the operation of data in the shuttle box to ensure data security.

[0049] Data verification: Perform data verification during data operation to ensure the accuracy and completeness of the data.

[0050] (5) Strong scalability:

[0051] Custom extension: You can customize the style, properties, and methods of components according to actual needs to achieve personalized functional requirements.

[0052] Integration with other systems: a-tree and a-transfer controls can be integrated with other systems, such as OA systems, ERP systems, etc., to achieve data sharing and exchange.

[0053] (6) Wide range of application scenarios:

[0054] Organizational structure management: used to display the company's organizational structure, department personnel relationships, etc., to facilitate managers to carry out personnel management and organizational adjustments.

[0055] Permission management: used to set user permissions, assign roles, etc. to improve system security.

[0056] Data screening: used to screen employee information of a specific department or time period to facilitate data analysis by business personnel.

[0057] Equipment management: used to display equipment lists, equipment status, etc., to facilitate management personnel to monitor and maintain equipment.

[0058] In summary, combining the tree control a-tree and the shuttle box a-transfer of the Ant Design Vue library can bring many beneficial effects, such as improving data management efficiency, enhancing user experience, reducing development costs, improving data security, strong scalability and wide application scenarios. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0060] Attached Figure 1 It is a flowchart of a method for jointly using the a-tree and a-transfer components. DETAILED DESCRIPTION

[0061] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention is further described in detail below in conjunction with specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0062] A best embodiment is given below:

[0063] like Figure 1 As shown, the method for jointly using the a-tree and a-transfer components in this embodiment has the following steps:

[0064] S1. Introduce Ant Design Vue library into the Vue framework;

[0065] include:

[0066] (1) Install the Ant Design Vue library;

[0067] npminstall ant-design-vue@next;

[0068] (2) Completely import Ant Design Vue and its styles into the entry file main.js;

[0069] import Antd from'ant-design-vue'

[0070] import'ant-design-vue / dist / antd.css'

[0071] app.use(Antd).

[0072] S2. Create an a-transfder control instance;

[0073] Using the a-transfer control of the Ant Design Vue library, the data source on the left side of the shuttle box is bound through the data attribute dataSource, and the showSearch attribute is configured to enable the search function, the titles attribute is displayed with a custom title, the render attribute is used to define the rendering logic for each row of data, and the search event callback function is used to respond to changes in the search box content, thus providing an intuitive and interactive data filtering and transfer interface.

[0074] Advantages of a-transfer:

[0075] Intuitive data filtering: a-transfer controls display data in a list format and provide functions such as search, sorting, and grouping, allowing users to quickly find the data they need.

[0076] Flexible data transfer: Users can transfer data from the left list to the right list, or move data from the right list back to the left list, realizing flexible data transfer.

[0077] Support multiple selection / single selection: a-transfer control supports multiple selection or single selection mode to meet the needs of different scenarios.

[0078] S3. Create an a-tree control instance;

[0079] Using the a-tree control of the Ant Design Vue library, the tree data source is bound through the data attribute treeData, and the defaultExpandAll attribute is configured to implement the default expansion function, the checkable attribute is used to support node selection, and the check event and select event callback functions are used to handle node selection and click operations, thereby achieving efficient data management and flexible operation.

[0080] Advantages of a-tree control:

[0081] Clear hierarchical structure: The a-tree control displays data in a tree structure, intuitively presenting the hierarchical relationship of data, making it easier for users to understand and operate.

[0082] Convenient selection operation: Users can easily select single or multiple nodes and expand, collapse, and perform other operations as needed.

[0083] Rich customization functions: a-tree control supports custom node styles, icons, operation buttons, etc. to meet the needs of different scenarios.

[0084] S4. Link the a-tree and a-transfer controls, and implement two-way data binding and interaction through event monitoring and callback functions. Note that: from the Ant Design Vue library, we can know that in the examples of the tree shuttle box, the a-tree code is placed inside the a-transfer code.

[0085] Advantages of combined application:

[0086] Perfect combination of data visualization and operation: The a-tree control is responsible for the hierarchical display of data, and the a-transfer control is responsible for data filtering and transfer. The combination of the two realizes the perfect combination of data visualization and operation.

[0087] Improve data management efficiency: Users can quickly find the data they need and perform flexible operations, which greatly improves data management efficiency.

[0088] Improve user experience: Intuitive data display and convenient operation methods improve user experience and reduce user learning costs.

[0089] In summary, the present invention provides a method for the joint application of a-tree control based on the Ant Design Vue library and a-transfer control. By combining the advantages of the two controls, the visual display and flexible operation of data are realized, providing users with an efficient and easy-to-use data management and transmission solution, which has broad application prospects.

[0090] Based on the above method, the joint use system of a-tree and a-transfer components in this embodiment is characterized by, firstly, introducing the Ant Design Vue library into the Vue framework, and creating an a-transfer control instance and an a-tree control instance;

[0091] Then, the a-tree and a-transfer controls are linked to achieve two-way binding and interaction of data through event monitoring and callback functions.

[0092] When introducing the Ant Design Vue library into the Vue framework, include:

[0093] (1) Install the Ant Design Vue library;

[0094] npminstall ant-design-vue@next;

[0095] (2) Completely import Ant Design Vue and its styles into the entry file main.js;

[0096] import Antd from'ant-design-vue'

[0097] import'ant-design-vue / dist / antd.css'

[0098] app.use(Antd).

[0099] Using the a-transfer control of the Ant Design Vue library, the data source on the left side of the shuttle box is bound through the data attribute dataSource, and the showSearch attribute is configured to enable the search function, the titles attribute is displayed with a custom title, the render attribute is used to define the rendering logic for each row of data, and the search event callback function is used to respond to changes in the search box content, providing an intuitive and interactive data filtering and transfer interface.

[0100] Using the a-tree control of the Ant Design Vue library, the tree data source is bound through the data attribute treeData, and the defaultExpandAll attribute is configured to implement the default expansion function. The checkable attribute supports node selection, and the check event and select event callback functions are used to handle node selection and click operations, thereby realizing data management and operation.

[0101] The above-mentioned specific implementations are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above-mentioned specific implementations. Any technical solutions that conform to the above-mentioned specific implementations of the present invention and any appropriate changes or substitutions made by ordinary technicians in the relevant technical field shall fall within the patent protection scope of the present invention.

[0102] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for using a-tree and a-transfer components together, characterized in that: The steps are as follows: S1. Introduce Ant Design Vue library into the Vue framework; S2. Create an a-transfder control instance; S3. Create an a-tree control instance; S4. Link the a-tree and a-transfer controls to achieve two-way binding and interaction of data through event monitoring and callback functions.

2. The method for jointly using the a-tree and a-transfer components according to claim 1, characterized in that: In step S1, it includes: (1) Install the Ant Design Vue library; npminstall ant-design-vue@next; (2) Completely import Ant Design Vue and its styles into the entry file main.js; import Antd from'ant-design-vue' import'ant-design-vue / dist / antd.css' app.use(Antd).

3. The method for jointly using the a-tree and a-transfer components according to claim 2, characterized in that: In step S2, the a-transfer control of the Ant Design Vue library is used to bind the data source on the left side of the shuttle box through the data attribute dataSource, and the showSearch attribute is configured to enable the search function, the titles attribute is displayed with custom titles, the render attribute is used to define the rendering logic for each row of data, and the search event callback function is used to respond to changes in the search box content, providing an intuitive and interactive data filtering and transfer interface.

4. The method for combined use of a-tree and a-transfer components according to claim 3, characterized in that: In step S3, the a-tree control of the Ant Design Vue library is used to bind the tree data source through the data attribute treeData, and the defaultExpandAll attribute is configured to implement the default expansion function. The checkable attribute supports node selection, and the check event and select event callback functions are used to handle node selection and click operations, thereby realizing data management and operation.

5. A system for the joint use of a-tree and a-transfer components, characterized in that: First, introduce the AntDesign Vue library into the Vue framework and create a-transfder control instance and a-tree control instance; Then, the a-tree and a-transfer controls are linked to achieve two-way binding and interaction of data through event monitoring and callback functions.

6. The combined use device of a-tree and a-transfer components according to claim 5, characterized in that: When introducing the Ant Design Vue library into the Vue framework, include: (1) Install the Ant Design Vue library; npminstall ant-design-vue@next; (2) Completely import Ant Design Vue and its styles into the entry file main.js; import Antd from'ant-design-vue' import'ant-design-vue / dist / antd.css' app.use(Antd).

7. The combined use device of a-tree and a-transfer components according to claim 6, characterized in that: Using the a-transfer control of the Ant Design Vue library, the data source on the left side of the shuttle box is bound through the data attribute dataSource, and the showSearch attribute is configured to enable the search function, the titles attribute is displayed with a custom title, the render attribute is used to define the rendering logic for each row of data, and the search event callback function is used to respond to changes in the search box content, providing an intuitive and interactive data filtering and transfer interface.

8. The combined use device of a-tree and a-transfer components according to claim 7, characterized in that: Using the a-tree control of the Ant Design Vue library, the tree data source is bound through the data attribute treeData, and the defaultExpandAll attribute is configured to implement the default expansion function. The checkable attribute supports node selection, and the check event and select event callback functions are used to handle node selection and click operations, thereby realizing data management and operation.

Images