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,