Vue e-commerce background management system nanny level tutorial (ten) - commodity classification

General article address:

Vue. Js base will not? — This article is enough

Vue whole family barrel Webpack Git Axios Element- UI

10.1 This section describes the function of product classification

Effect:

Categories can be added and deleted:

10.2 Create a goods-Cate sub-branch and push it into the code cloud

Git checkout -b doods_cate Create a new branch Git branch check the current branch Git push -u orgin goods_cate Create a new branch in the cloud

10.3 Loading the Product Classification Component Through Routes

Create cate. Vue, create structure, behavior, style

Loaded in a route, registered as a children subroute:

10.4 Invoking API to Obtain Commodity Classification List Data

Breadcrumb navigation:

Add category button:

Effect:

Calling data via API:

Define array catslist array writerfunction, define function, create lifecycle function

QueryInfo () : query criteria

Query request:

Returns a function to judge the request:

Total needs to define an array:

10.5 Initial Use of VUe-table-with-tree-grid

Using third-party plug-ins:

Import third-party modules in main.js

Global registration:

The columns: title

Prpo: Specific value

Hide the previous check box:

Use properties to modify:

10.6 Render table data using custom template columns

Use scope slots

10.7 Render the UI structure for sorting and manipulation

Define the data first:

Define templates in the table area:

Then render the data:

Modify style:

Using the Type attribute

Use V-if for on-demand rendering in VUE

Beautify ICONS:

10.8 Enabling paging

Bind event handlers:

Bind handler functions in methods:

Assign to date:

Initiating a data request:

The second function:

Third: current page display:

Current – change:

10.9 Rendering Add Categories Add categories dialog boxes and forms

Click the Add button to pop up the Add dialog box:

In the card View area: Add categories dialog box

The UI structure:

After optimization:

Add the date:

Bind click events:

New event handlers:

Describes the contents of the pop-up box:

Define data:

Optimization:

Bidirectional binding data:

Define validation object rules:

10.10 Obtaining the Parent Category Data List

Effect:

API:

Add function:

Initiate a GET request:

Call this function when clicking to expand the dialog:

Simplify asynchronous operations: Deconstruct promises, judge validation.

When successful, it is saved in date

Assign to date:

10.11 Render cascade selectors

Using components:

Import on demand, global registration

Write structure first

Use the following attributes:

Props configuration

Define propes in date:

Define bidirectional binding functions:

The changes need to be printed in the selection box:

Select a level 1 category

10.12 Process the data in the form according to the changes in the parent category

When entering data, listen to whether the following is the first level classification or the default. If it is the first level classification, the added data will be the second level classification below this level classification

Judge:

Click ok to get the data