General article address:
Vue. Js base will not? — This article is enough
Vue whole family barrel Webpack Git Axios Element- UI
5. User list layout and function realization
5.1 Displaying the User Component List in Routing Mode
1. Click the User list to display the user list area in the home body area
Effect:
2, create user.vue(user list page) and structure style behavior area
3. Display the page through routing:
Importing the User component
Define the child component in the home component and the user child component in the routing rule of the home:
5.2 Save the left menu bar in sessionStorage
Take advantage of the default-active component in the Element navigation menu:
It’s dead here.
What if we write it dynamically?
Save the current click to expand the page to sessionStrage, dynamically change this property by retrieving the value of sessionStrage
First bind a click event to the secondary menu:
Define the event function:
The first activePath is the function name and the second is the function value
And now it’s stored in sessionStrage
Define the active link address at date: activePath and dynamically insert it into the structure:
Create a life cycle function to facilitate calling addresses directly using this:
Dynamically changing the path value:
Conclusion:
The clicked values are stored in sessionStorage and then dynamically assigned to the secondary menu using the element-U property to highlight the changes
5.3 Drawing the Basic Layout structure of user List components
Using the breadcrumb component in the Element-UI component:
Since the breadcrumb component is used for the first time, import it as needed in element.js:
Then register:
Optimization on demand:
The following card view area:
Import and register as needed in element.js after writing the structure:
Optimization style:
The next step is to find the text box from element:
Optimization style:
Use element style:
End result:
Conclusion:
Draw styles to use element components, import them as needed in element.js, register them, and then use the corresponding styles and properties for root requirements
5.4 Obtaining User List Data
Viewing the API Interface
Define some basic constructs: Date created (lifecycle functions) methods (custom functions)
The way to use it is to define functions in methods, then bind events to structures, add functions,
Make a GET request using the built-in function $HTTP request:
Pramas contains three parameters that can be written directly in brackets
However, it is recommended to define it in date
The Ajax request is made, and the GET function returns a promise function that can be simplified with async and await. Get a data object that can be parsed and received with const, thus calling const
Print result:
Now that we have the data, we can do the assignment.
Userlist and total are defined in date
5.5 Render the basic user list using the EL-Table component
Import components on demand, global registry, specify data source with: date, add structure,
Final effect:
5.6 Adding index Columns to a table
The sequence number before each table,
Add a column to the header of the table and set type=index. Index column
5.7 Customize the display effect of the Status Column
Using scope slots:
Put a template inside the list and bind the property values of the data using the Switch component (import on demand, register)
5.8 Render action columns through scope slots
Custom slot three functions: use icon buttons
Effect:
5.9 Implementing paging Effect
Element has ready-made components. There are functions to define:
End result:
Function by calling pagesize= newSize
Write the following newly acquired function in the behavior area to the dead data in date
The final two functions are written as follows:
5.10 Modifying user Status Modified
When modifying a user’s page, it is not saved in the background database, so the operation is not saved. Using switch’s change function, it can generate a callback value.
Define userStateChanged function:
View the documentation to find the interface:
Make a PUT request through Axios. To change the user state.
In the same way returning a promise can be simplified with async and await:
Then judge and return the message,
5.11 Enabling the Search Function
Enter the text in the text box, you can search the corresponding text, and bind the data in the text box to date in a two-way way.
Use v-model binding in the text input field
Call getueserList in the event handler: getueserList = getueserList = getueserList = getueserList
Insert a picture description here
Empty optimizations:
Bind events, define handlers,