Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use Element-UI for everyone, Xiaobian thinks it is quite practical, so share it for everyone to make a reference, I hope you can gain something after reading this article.

I. After installing vue-cli scaffold

1. Install Element-UI:

npm i element-ui -S

2. Reference in main.js file in project

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-default/index.css'

3. Registration:

Vue.use(ElementUI)

II. Using Element-UI

1. The overall frame of the outermost page, using el-row el-col, is rasterized, i.e. Layout

Instead of using Container Layout containers, customize your style using class="container" class="header" class="main"

These are external layout containers. When defining internal widgets, you can use the components provided by Element-UI, such as NavMenu navigation menu, etc.

Third, the use of sidebar navigation menu

navigate one Group I option 1 option 2 option 3 Navigation II

This will generate a side navigation, but each navigation will have a title, very ugly

only need to Group I option 1 Option 2 should read option 1 option 2 That's it. Remove the heading Group 1.

NavMenu Navigation Menu Parameter Description:

1. collapse: whether the menu is collapsed and hidden (only icon is displayed), you can reverse this value through events to achieve collapse and expansion.

unique-opened: menu sub-items, only one submenu at a time

default-active: index of the currently active menu

4. router: activate vue-router mode, use index as path for routing jump (default is to use to for routing guidance)

Fourth, for Table route, it is the child route of the home page, so define this Table route in children, and then on the home page, where you need to display, use to display the contents of Table route, here is defined in mian, and then display the contents of child route.

5. The type of the value bound by index must be string type, not number type, different from the binding of key.

{{item.name}}

Write:index="index+" directly, it will report an error, the property value to be bound is string type, now it is number type, solution: use implicit type conversion, that is," index+' " can convert index to string type

Six, side navigation, some are drop-down list, some are not, so you need to define the route, indicate which is not drop-down list, here use oneLeaf:true, indicating that the route is not drop-down list, loop according to this attribute to judge, here is traversal:

And, you need to put a template label on the outermost part to circulate.

{{item.name}} {{list.name}} {{item.children[0].name}}

VII. Table

Used to display multiple data with similar structure, and can sort, filter, compare or other custom operations on the data.

edit delete

1. data: data displayed in a table, array type

Sortable: Sorts based on the column where the attribute is set

formatter: used to format the value of the specified column, accept a Function, will pass two parameters: row and column, can be processed according to their own needs.

4. page-size: number of entries displayed per page, support.sync modifier

5. total: total number of entries

6. current-page: current page number, support.sync modifier

VIII. Pagination of tables

Set total, page-size, current-page and other attributes in data, then bind to el-pagination component, and then filter or filter the total data tableData3 through these attributes, you can realize paging

The first page is to bind data to el-table: as shown in the figure

Changes to the JS section:

IX.

Add user interface: pass in new user data through parameters, push to the simulated user data array, and then return a 200 to the foreground, new successfully

Delete user interface: filter out all data not equal to the user id passed through the foreground at the interface, and then return it to the foreground, that is, delete the user data corresponding to the id, through the filter method

Edit user data interface: filter out the corresponding user data by using some methods through the id parameter passed in the foreground, and then change this user data to change all values to the parameters passed in the foreground.

Editing UI is the same as adding UI. Copy user data of current row directly to the open editing UI by this.editform = Object.assign({},row). There is a problem. Only name, age and address are passed, gender and birthday are not. Here, you need to make the following modifications:

male female

label Dynamic binding required

Login interface:

In login.vue, direct axios.post ('/login').then(), and the error will be: Cannot read property 'then' of undefined

The reason is that the login interface in mock.js does not return a promise object.

In addition, in mock.js, the front-end data type obtained by the interface parameter config is a string, which needs to be converted to json format and converted by JSON.parse().

X.native modifier

Add click event to logout button when logout operation is done, and find no effect

my message set log out

Later, after click, add is.native to succeed

.native -Listens for native events of the component root element.

This is mainly about adding native events to custom components.

About "how to use Element-UI" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.