Uniapp-based double-layer data selection method, equipment and medium
By adopting a two-layer data selection method in uniapp, using the multi-select mode and lazy loading mode of preset data selection components, the problem of insufficient ease of use and scalability of hierarchical selection components in the prior art is solved, and flexible data selection and efficient performance are achieved.
Patent Information
- Application Number
- CN202510071517.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-01-16
- Publication Date
- 2025-05-13
AI Technical Summary
The existing mobile hierarchical selection components have shortcomings in terms of ease of use, scalability, and interaction friendliness, and cannot effectively support multiple selection functions and flexible data structures.
Using a dual-layer data selection method based on uniapp, the multi-select mode and lazy loading mode of preset data selection components is provided to provide a hierarchical data selection structure and flexible data source loading methods, and the switching of single-select and multi-select modes and the loading of static and dynamic data sources.
It improves the intuitiveness and flexibility of users to select data, optimizes performance, adapts to the needs of different scenarios, and realizes real-time update and synchronization of data.
Smart Images
Figure CN119987617A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of front-end development and mobile application technology, and in particular to a double-layer data selection method, device and medium based on uniapp. Background Art
[0002] In the current field of mobile application development, hierarchical selection and hierarchical multi-selection functions have attracted much attention due to their wide range of application scenarios. Whether in form filling, product screening, or option selection, users need to locate and select the required content through hierarchical selection.
[0003] However, most of the existing mobile components only support single selection functions, but cannot realize multiple selection. And for components with multiple selection functions, the operation process design of some hierarchical selection components is not concise and clear enough, resulting in users having to go through complicated operation steps during the selection process. In addition, some components lack flexibility in data structure and function design, making it difficult to adapt to the diverse needs of different projects. Therefore, the existing hierarchical selection components still have certain deficiencies in terms of ease of use, scalability, and interactive friendliness. Summary of the invention
[0004] The embodiments of the present application provide a two-layer data selection method, device and medium based on uniapp, which are used to solve the following technical problems: the existing hierarchical selection components still have certain shortcomings in terms of ease of use, scalability and interactive friendliness.
[0005] The present application embodiment adopts the following technical solutions:
[0006] The embodiment of the present application provides a two-layer data selection method based on uniapp. It includes calling a preset data selection component to the current project; wherein, one side of the preset data selection component is provided with a first-level classification switch, and the other side is provided with a second-level option selection; based on the multiple attribute of the preset data selection component, the data selection mode is determined; wherein the selection mode includes a single selection mode and a multiple selection mode; based on the lazy attribute of the preset data selection component, the data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; the preset data selection component is subjected to show attribute binding and event binding, and based on the data selection mode and the data source loading mode, the preset data selection component after event binding processing determines the selected data.
[0007] The embodiment of the present application provides a hierarchical data selection structure by setting up a first-level classification switch and a second-level option selection, so that users can browse and select the required data more intuitively. The data selection mode is determined based on the multiple attribute, which provides flexibility and can select single-selection or multiple-selection mode according to actual needs. The data source loading mode is determined based on the lazy attribute to optimize performance. Static data sources are suitable for scenarios with small data volumes or infrequent data changes, and all data can be loaded at one time. Dynamic data sources are suitable for scenarios with large data volumes or frequent data updates, and data can be loaded on demand, reducing initial loading time and memory usage. The preset data selection component after event binding processing determines the selected data, and realizes real-time updating and synchronization of data. The embodiment of the present application ensures the effective integration and efficient operation of the preset data selection component in the project by reasonably configuring and binding the properties and events of the components.
[0008] In one implementation of the present application, the data selection mode is determined based on the multiple attribute of the preset data selection component, specifically including: multiple is a Boolean type; when the multiple attribute is true, the preset data selection component is determined to be in multiple selection mode; otherwise, the preset data selection component defaults to single selection mode.
[0009] In one implementation of the present application, based on the lazy attribute of the preset data selection component, the data source loading mode is determined, specifically including: when the setting corresponding to the lazy attribute is true, the data source is changed to dynamic loading; when the setting corresponding to the lazy attribute is not true, the data source is changed to static loading.
[0010] In one implementation of the present application, show attribute binding and event binding are performed on the preset data selection component, specifically including: binding a defined variable to the show attribute corresponding to the component; when the variable is true, the component is displayed on the page; when the variable is false, the component is hidden on the page.
[0011] In one implementation of the present application, before determining the selected data, the method also includes: adding corresponding callback methods to the close button and the confirm button corresponding to the component through event binding; responding to the request command corresponding to the close button sent by the user, triggering the first callback method; responding to the request command corresponding to the confirm button sent by the user, triggering the second callback method.
[0012] In an implementation of the present application, the selected data is determined through the preset data selection component after event binding processing, specifically including: passing the data selected by the user as a parameter through the preset data selection component after event binding processing.
[0013] In one implementation of the present application, after the lazy property of the component is selected based on preset data and the data source loading mode is determined, the method also includes: binding the defined variables to the updateInterval property corresponding to the component; starting a timer inside the component according to the time interval for updating the data set by the updateInterval property, and updating the next level according to the scheduled time.
[0014] In one implementation of the present application, after determining the selected data, the method also includes: preprocessing the selected data; determining the type of the selected data, and determining a corresponding data processing method in a preset data table based on the data type; wherein the preset data table includes multiple data types, and also includes data processing methods corresponding to the multiple data types; the data processing method includes at least one of data sorting, data filtering, and data calculation; and sending the processed selected data to different services for processing according to user needs.
[0015] An embodiment of the present application provides a two-layer data selection device based on uniapp, including: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can: call a preset data selection component into a current project; wherein a first-level classification switch is provided on one side of the preset data selection component, and a second-level option selection is provided on the other side; based on the multiple attribute of the preset data selection component, a data selection mode is determined; wherein the selection mode includes a single selection mode and a multiple selection mode; based on the lazy attribute of the preset data selection component, a data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; show attribute binding and event binding are performed on the preset data selection component, and based on the data selection mode and the data source loading mode, the selected data is determined through the preset data selection component after event binding processing.
[0016] A non-volatile computer storage medium provided by an embodiment of the present application stores computer executable instructions, and the computer executable instructions are configured to: call a preset data selection component into a current project; wherein a first-level classification switch is provided on one side of the preset data selection component, and a second-level option selection is provided on the other side; based on the multiple attribute of the preset data selection component, a data selection mode is determined; wherein the selection mode includes a single selection mode and a multiple selection mode; based on the lazy attribute of the preset data selection component, a data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; show attribute binding and event binding are performed on the preset data selection component, and based on the data selection mode and the data source loading mode, the selected data is determined through the preset data selection component after event binding processing.
[0017] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects: The embodiments of the present application provide a hierarchical data selection structure by setting a first-level classification switch and a second-level option selection, so that users can browse and select the required data more intuitively. The data selection mode is determined based on the multiple attribute, which provides flexibility and can select single-selection or multiple-selection mode according to actual needs. The data source loading mode is determined based on the lazy attribute to optimize performance. Static data sources are suitable for scenarios with small data volumes or infrequent data changes, and all data can be loaded at one time. Dynamic data sources are suitable for scenarios with large data volumes or frequent data updates. Data can be loaded on demand, reducing initial loading time and memory usage. The preset data selection component after event binding processing determines the selected data, realizing real-time updating and synchronization of data. The embodiments of the present application ensure the effective integration and efficient operation of the preset data selection component in the project by reasonably configuring and binding the properties and events of the components. BRIEF DESCRIPTION OF THE DRAWINGS
[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the drawings required for use in the embodiments or the prior art descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative labor. In the drawings:
[0019] Figure 1 A flow chart of a two-layer data selection method based on uniapp provided in an embodiment of the present application;
[0020] Figure 2 A schematic diagram of the structure of a dual-layer data selection device based on uniapp provided in an embodiment of the present application. DETAILED DESCRIPTION
[0021] The embodiments of the present application provide a dual-layer data selection method, device and medium based on uniapp.
[0022] In order to enable those skilled in the art to better understand the technical solutions in this application, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the described embodiments are only part of the embodiments of this application, not all of them. Based on the embodiments of this specification, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this application.
[0023] The technical solution proposed in the embodiments of the present application is described in detail below with reference to the accompanying drawings.
[0024] In one implementation of the present application, the preset data selection component mainly includes the following properties and methods:
[0025] 1. show: Boolean type, used to control the display / hide of components.
[0026] 2. options: Array type, the optional data source of the component, in the format of a two-dimensional tree structure.
[0027] 3. map: Object type, used to modify the data source key name. The default key names are label, value, and children.
[0028] 4. multiple: Boolean type, the default is single selection mode. When this property is true, the component is in multiple selection mode.
[0029] 5. lazy: Boolean type, whether to use lazy loading to load secondary options.
[0030] 6. lazyLoad: Function, a method for dynamically loading data sources.
[0031] 7. close: Function, the callback method executed when the pop-up layer is closed.
[0032] 8. confirm: Function, the callback method executed when you click OK or click an option in single-select mode.
[0033] Figure 1 A flow chart of a two-layer data selection method based on uniapp is provided in an embodiment of the present application, such as Figure 1 As shown, the two-layer data selection method based on uniapp includes the following steps:
[0034] S101, calling a preset data selection component into the current project.
[0035] In one implementation of the present application, the preset data selection component in the embodiment of the present application is developed based on the uniapp framework and can be compatible with a variety of different usage platforms, including iOS, Android, H5, mini programs, etc. The preset data selection component in the embodiment of the present application is a double-layer structure: the component supports the function of switching the first-level classification on the left and the second-level option selection on the right.
[0036] In one implementation of the present application, the development process of the preset data selection component is:
[0037] The first step is to define the data structure and properties of the component, including the hierarchical relationship of options, whether to select multiple options, whether to load lazily, selected status, etc.
[0038] The second step is to use uniapp's component-based development approach to write component templates, styles, and logic codes.
[0039] The third step is to realize the display and interaction of the hierarchical structure, including operations such as expanding, selecting, unselecting, and selecting all options.
[0040] The fourth step is to optimize the rendering performance and interactive response speed of components and reduce unnecessary DOM operations and network requests.
[0041] The fifth step is to optimize the compatibility of components on different platforms.
[0042] In one implementation of the present application, the first-level category switch is usually located on one side of the data selection component. As the starting point for users to browse and select data, the main function of the first-level category switch is to allow users to switch between different data categories. When a user clicks or touches a category, the component should be able to respond to this operation and display the secondary options under the category. The secondary option selection is located adjacent to the first-level category switch, usually below or to the right. The main function of the secondary option selection is to display all available options under the currently selected category and allow the user to select one or more from them. By presetting the first-level category switching and secondary option selection functions of the data selection component, the user experience and interactivity of the application can be significantly improved.
[0043] Furthermore, when the current business needs to use the preset data selection component, the preset data selection component is called into the current project.
[0044] S102: Determine a data selection mode based on the multiple attribute of the preset data selection component; wherein the selection mode includes a single selection mode and a multiple selection mode.
[0045] In one implementation of the present application, multiple is of Boolean type. When the attribute of multiple is true, it is determined that the preset data selection component is in multiple selection mode. Otherwise, the preset data selection component defaults to single selection mode.
[0046] Specifically, in single-select mode, that is, multiple is false or not set, in this mode, the user can only select one option from the drop-down list. In multiple-select mode, that is, multiple is true, in this mode, the user can select multiple options in the drop-down list.
[0047] S103: Determine a data source loading mode based on the lazy attribute of the preset data selection component; wherein the data source loading mode includes a static data source and a dynamic data source.
[0048] In one implementation of the present application, when the setting corresponding to the lazy attribute is true, the data source is changed to dynamic loading. When the setting corresponding to the lazy attribute is not true, the data source is changed to static loading.
[0049] Specifically, when the lazy property is set to true, the data source is not fully loaded into memory immediately when the page loads. Data is loaded on demand based on user actions (such as scrolling, clicking, searching, etc.). This approach can significantly reduce initial page load time and reduce memory usage, especially when dealing with large amounts of data.
[0050] Furthermore, if the lazy property is not set to true, the data source will be fully loaded into memory when the page is loaded. This method is suitable for scenarios with small amounts of data or when all data needs to be accessed immediately. Static loading is usually simpler and easier to implement because it does not require processing of complex data loading logic.
[0051] In one implementation of the present application, the defined variable is bound to the updateInterval attribute corresponding to the component. According to the time interval for updating data set by the updateInterval attribute, a timer is started inside the component, and the next level is updated according to the timer.
[0052] Specifically, the updateInterval property defines how often the component should update the data it displays. This interval is set based on the value of the bound variable. For example, if the variable is set to 1000 milliseconds, the component should update the data once a second. Once the updateInterval property is set, a timer needs to be started inside the component to perform certain operations periodically based on this interval. A timer is a programming construct that allows code to be executed after a specified time interval, or repeatedly until it is canceled. In this scenario, the component will use the value of the updateInterval property to configure the timer. After the timer is started, it will trigger an event at the set time interval, which is the update of the next level.
[0053] S104, performing show attribute binding and event binding on the preset data selection component, and determining the selected data through the preset data selection component after event binding processing based on the data selection mode and the data source loading mode.
[0054] In one implementation of the present application, a defined variable is bound to the show attribute corresponding to the component. When the variable is true, the component is displayed on the page, and when the variable is false, the component is hidden on the page.
[0055] Specifically, first, you need to define a variable in the component's parent or global state, such as Redux, Vuex, Angular service, etc. This variable will be used as the value of the show property. The variable type is usually true or false, and it is used to represent the display state of the component. Bind this variable to the show property of the target component.
[0056] Furthermore, in most front-end frameworks, this can be achieved through template syntax or component attribute passing. For example, in React, variables may be passed to child components through attribute passing in JSX; in Vue, v-bind or shorthand syntax (:) may be used to bind variables; in Angular, attribute binding syntax ([property] = "value") may be used to achieve this.
[0057] Furthermore, once the variable is bound to the show property of the component, the component will decide whether to render itself based on the value of the variable. If the variable is true, the component will be rendered into the DOM and the user can see it; if the variable is false, the component will not be rendered into the DOM and the user cannot see it. This mechanism allows users to dynamically show or hide components based on the state of the application.
[0058] Furthermore, in actual applications, specific UI elements can be displayed or hidden according to the user's permissions or roles, modal boxes, drop-down menus, etc. can be displayed or hidden according to user interactions (such as clicking a button, selecting a drop-down menu item, etc.), or loading indicators can be displayed or hidden according to the data loading status.
[0059] In one implementation of the present application, corresponding callback methods are added to the close button and the confirm button corresponding to the component by event binding. In response to the request command corresponding to the close button sent by the user, the first callback method is triggered, and in response to the request command corresponding to the confirm button sent by the user, the second callback method is triggered.
[0060] Specifically, the close button is usually used to cancel the current operation, close the modal box, or exit a view. When the user clicks the close button, a callback method is triggered, which is responsible for processing the logic related to the close operation. This callback method may perform some cleanup work, such as canceling ongoing asynchronous requests, resetting form status, closing modal boxes, etc.
[0061] Furthermore, the OK button is usually used to submit a form, confirm a selection, or perform an operation. When the user clicks the OK button, another callback method is triggered, which is responsible for processing the logic related to the confirmation operation. This callback method may verify user input, send data to the server, update application status, etc.
[0062] Furthermore, in order to achieve the above functions, the close button and the confirm button need to be bound to the corresponding callback methods. This can usually be achieved through an event monitoring mechanism. Specifically, add a click event listener to the close button. When the user clicks the close button, the click event is triggered, the event listener captures this event, and calls the specified first callback method. Add a click event listener to the confirm button. When the user clicks the confirm button, the click event is triggered, the event listener captures this event, and calls the specified second callback method.
[0063] Among them, the first callback method in the embodiment of the present application can perform some cleanup work, such as canceling the request, resetting the status, etc. It may also include some user feedback logic, such as displaying a message of successful closure. The second callback method in the embodiment of the present application may verify the data entered by the user. If the data is valid, it may send the data to the server or update the status of the application. It may also include some user feedback logic, such as displaying a message of successful submission.
[0064] In one implementation of the present application, the data selected by the user is transmitted as a parameter through the preset data selection component after event binding processing.
[0065] Specifically, through the event binding mechanism, when the user makes a selection, the data object or value can be automatically passed as a parameter to the previously bound processing function. After the processing function receives the parameter, it can perform further processing or operation as needed.
[0066] In one implementation of the present application, the selected data is preprocessed. The type of the selected data is determined, and the corresponding data processing method is determined in a preset data table based on the data type; wherein the preset data table includes multiple data types, and also includes data processing methods corresponding to the multiple data types; the data processing method includes at least one of data sorting, data filtering, and data calculation. The processed selected data is sent to different services for processing according to user needs.
[0067] Specifically, after the preprocessing stage, the system needs to determine the type of the selected data. Data type refers to the nature or classification of data, such as numeric type, character type, date type, etc. Different types of data require different processing methods. In order to process different types of data, the embodiment of the present application is provided with a preset data table. This table contains a variety of data types and the data processing methods corresponding to each data type. The data processing method refers to the method or strategy for performing specific operations on the data, such as data sorting, data filtering, and data calculation. After determining the type of the selected data, the system will search for the corresponding data processing method in the preset data table. Then, the selected data is processed according to the processing method found. This process may involve multiple aspects such as data conversion, cleaning, and enhancement to ensure the quality and availability of the data.
[0068] Further, after preprocessing and applying the corresponding data processing methods, the selected data is sent to different services for processing according to user needs. These services may be data analysis tools, machine learning models, data visualization platforms, etc. Each service has its specific purpose and functions, and can further analyze, predict or display the received data. These services will process the processed data according to the user's needs. This may include generating reports, providing decision support, triggering alarms or performing other automated tasks.
[0069] Figure 2 The following is a schematic diagram of the structure of a dual-layer data selection device based on uniapp provided in an embodiment of the present application. Figure 2As shown, a two-layer data selection device based on uniapp includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can: call a preset data selection component to the current project; wherein a first-level classification switch is provided on one side of the preset data selection component, and a second-level option selection is provided on the other side; based on the multiple attribute of the preset data selection component, a data selection mode is determined; wherein the selection mode includes a single selection mode and a multiple selection mode; based on the lazy attribute of the preset data selection component, a data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; the preset data selection component is subjected to show attribute binding and event binding, and based on the data selection mode and the data source loading mode, the selected data is determined through the preset data selection component after event binding processing.
[0070] A non-volatile computer storage medium provided by an embodiment of the present application stores computer executable instructions, and the computer executable instructions are configured to: call a preset data selection component into a current project; wherein a first-level classification switch is provided on one side of the preset data selection component, and a second-level option selection is provided on the other side; based on the multiple attribute of the preset data selection component, a data selection mode is determined; wherein the selection mode includes a single selection mode and a multiple selection mode; based on the lazy attribute of the preset data selection component, a data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; show attribute binding and event binding are performed on the preset data selection component, and based on the data selection mode and the data source loading mode, the selected data is determined through the preset data selection component after event binding processing.
[0071] Each embodiment in this application is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device, equipment, and non-volatile computer storage medium embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.
[0072] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the embodiments of the present application may have various changes and variations. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the various embodiments of the present application.
Claims
1. A two-layer data selection method based on uniapp, characterized in that: The method comprises: Calling a preset data selection component into the current project; wherein the preset data selection component has a primary classification switch on one side and a secondary option selection on the other side; Based on the multiple attribute of the preset data selection component, determining a data selection mode; wherein the selection mode includes a single selection mode and a multiple selection mode; Based on the lazy attribute of the preset data selection component, a data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; The preset data selection component is subjected to show attribute binding and event binding, and based on the data selection mode and the data source loading mode, the selected data is determined by the preset data selection component after event binding processing.
2. A two-layer data selection method based on uniapp according to claim 1, characterized in that: The determining of the data selection mode based on the multiple attribute of the preset data selection component specifically includes: The multiple is of Boolean type; When the attribute of the multiple is true, determining that the preset data selection component is in the multiple selection mode; Otherwise, the preset data selection component defaults to the single selection mode.
3. A two-layer data selection method based on uniapp according to claim 1, characterized in that: The determining of the data source loading mode based on the lazy attribute of the preset data selection component specifically includes: When the lazy attribute is set to true, the data source is changed to dynamic loading; When the setting corresponding to the lazy attribute is not true, the data source is changed to static loading.
4. A two-layer data selection method based on uniapp according to claim 1, characterized in that: The performing show attribute binding and event binding on the preset data selection component specifically includes: Bind the defined variables to the show attributes corresponding to the components; When the variable is true, the component is displayed on the page; When the variable is false, the component is hidden on the page.
5. The double-layer data selection method based on uniapp according to claim 1, characterized in that: Before determining the selected data, the method further includes: By means of event binding, corresponding callback methods are added to the close button and confirm button corresponding to the component; In response to the request command corresponding to the close button sent by the user, triggering the first callback method; In response to the request command corresponding to the confirmation button sent by the user, the second callback method is triggered.
6. A two-layer data selection method based on uniapp according to claim 1, characterized in that: The preset data selection component after the event binding process determines the selected data, specifically including: The preset data selection component after event binding processing transmits the data selected by the user as a parameter.
7. A two-layer data selection method based on uniapp according to claim 1, characterized in that: After determining the data source loading mode based on the lazy attribute of the preset data selection component, the method further includes: Bind the defined variables to the updateInterval property of the component; According to the time interval for updating data set by the updateInterval attribute, a timer is started inside the component, and the next level is updated according to the timer.
8. The uniapp-based two-layer data selection method according to claim 1, characterized in that: After determining the selected data, the method further includes: Preprocessing the selected data; Determine the type of the selected data, and determine a corresponding data processing method in a preset data table based on the data type; wherein the preset data table includes multiple data types, and also includes multiple data processing methods corresponding to the data types; the data processing method includes at least one of data sorting, data filtering and data calculation; The processed selected data is sent to different services for processing according to user needs.
9. A dual-layer data selection device based on uniapp, characterized in that: The device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions executable by the at least one processor, the instructions being executed by the at least one processor to enable the at least one processor to: Calling a preset data selection component into the current project; wherein the preset data selection component has a primary classification switch on one side and a secondary option selection on the other side; Based on the multiple attribute of the preset data selection component, determining a data selection mode; wherein the selection mode includes a single selection mode and a multiple selection mode; Based on the lazy attribute of the preset data selection component, a data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; The preset data selection component is subjected to show attribute binding and event binding, and based on the data selection mode and the data source loading mode, the selected data is determined by the preset data selection component after event binding processing.
10. A non-volatile computer storage medium storing computer executable instructions, wherein the computer executable instructions are configured to: Call the preset data selection component into the current project; where: The preset data selection component is provided with a primary classification switch on one side and a secondary option selection on the other side; Based on the multiple attribute of the preset data selection component, determining a data selection mode; wherein the selection mode includes a single selection mode and a multiple selection mode; Based on the lazy attribute of the preset data selection component, a data source loading mode is determined; wherein the data source loading mode includes a static data source and a dynamic data source; The preset data selection component is subjected to show attribute binding and event binding, and based on the data selection mode and the data source loading mode, the selected data is determined by the preset data selection component after event binding processing.