General article address:
Vue. Js base will not? — This article is enough
Vue whole family barrel Webpack Git Axios Element- UI
11. Classification parameters
11.1 This section describes the functions of category parameters
Only three classifications are allowed:
11.2 Loading classification Parameter components through Routes
Create a component page and initialize it:
Import in a route: Child routing component rules:
11.3 Render the basic UI structure of the classification parameter page
Breadcrumbs, card view table column
Bread crumbs:
Yellow prompt box: Import on demand, global registration
Custom close button:
With the icon:
Select product area:
Add styles:
Top and bottom border:
11.4 Calling API to obtain commodity classification data list
API:
Get request:
Define an array:
Define a function:
Print it out
11.5 Render the cascading selection box for the product category
Options: Data attributes
Render structure:
Define data in date:
Event handlers:
11.6 Select range in the Control cascading selection box
Only three classifications are allowed. Listen for the change event of the selector and determine the length. If the length is 3, select level 3
Check the length of the array in change:
11.7 Render the Tabs TAB of category parameters
Tabs:
Global registration, import on demand
Registration Data:
Define events:
Change name:
11.8 Render Adds parameter buttons and controls button disabling
Add button:
Enable button box if item category is selected
Define function: check array length===3
Property binding:
11.9 Obtaining Parameter List Data
Change the properties of the button: only and MANY
Define many on date
Initiate a data request in the change event following the selection:
Parameters obtained after selecting three-level classification:
Judge: simplify the promise request:
11.10 Switch the Tabs panel and obtain the parameter list again
Define a separate function for retrieving data:
11.11 Mount the obtained parameter data to different numbers
There is only one copy of data to be obtained. First, determine whether it is dynamic or static data:
Define two dates:
11.12 Render Tables for dynamic parameters and static properties
Just got the numbers:
Get the data in dynamic parameters
A line; Index column: name column, operation column,
Static copy will do: modify data:
11.13 Render The Dialog box for Adding Data
Effect:
Here, because both dynamic and static panels are the same, you can use a structure
Render structure: dialog box for adding parameters
After the optimization:
Define data:
Definition method:
After clicking the button, a dialog box is displayed. Bind click events.
Dialog box structure for adding parameters:
After optimization:
Define data:
Define a function:
Cancel data after closing the dialog box
Bind close event:
Define events:
Reinstallation method: resetFields
11.14 Dynamic parameters and static attributes are added
Prevalidates the form before submitting the data request:
API:
Bind event handlers:
Define a function:
11.15 Render Modify Parameter dialog box
Effect:
Just change some parameters using add dialog assignment
Modify button binding single machine events
Define this function:
Change addDialogvisible to EditDisLogVisilBe
Function after closing:
Add rate data:
Editparams click the button to modify the parameter:
11.16 Modifying Parameters is complete
API:
Edit button parameter transfer:
Make a request when a button is clicked:
And then parse. Judge:
Assignment:
Click OK: Get data, initiate a request;
Judge and optimize promises
11.17 Deleting the Service Logic of parameters is complete
Click the Delete button to generate the event
Bind events first:
Define event handlers:
Delete the corresponding data based on the ID
2. To judge or optimize:
This parameter is optional under 11.18 Render Parameters
Renderings: The lowest level of data items
The array returned by the server is separated by Spaces, and we need to separate the array and render it on the page after the for loop
Loop array separator:
Use the scope slot to accept, for loop, and insert data in the expansion row:
11.19 Fixed a bug where ATr-VALS is an empty string
If it is an empty string, do not delimit it. If it is an empty string, do not delimit it.
11.20 Switch between buttons and text boxes
new tag :
Use the element-tag:
In the expanded line:
Optimization: After v-IF structure:
Define data:
Define a function:
11.21 Provide a separate inputVisib for each row
After clicking the Add button: both lines are connected
Add a Boolean value to show and hide the controller enclosure,
Each row of data has its own Boolean sum
Define booleans separately
11.22 Let the text box automatically gain focus
The $nexttick method works:
11.23 Switch display between text boxes and buttons
Change inputva to false:
Pass in the obtained parameters:
We then accept arguments in the event handler:
Empty content: Determine whether the content is empty
11.24 Parameters are added successfully
The callback function is called when you enter or lose focus:
Making an HTTP request:
API:
Initiate a request:
Optimization request:
Determines whether the request was successful
A function that listens for the text input field to lose focus, stores the contents of the input field in an array without returning it, and then makes an HTTP request with parameters: the required parameters are submitted to the server
11.25 Deleting Optional Parameters
Trigger the close event of the tag
Define a function:
Store the contents in an array:
Call this function:
11.26 Clearing Table Data
The commodity classification value allows the selection of tertiary classification, not the selection of primary and secondary labels:
Select not a level 3 event, clear the selector
Optimize this function:
11.27 Complete the line expansion effect in the static property table
Static property tables can be copied dynamically
11.28 Commit the local goods-Params branch code to the code cloud
Push success
Merge note branch:
Git push pushes the main branch
