1. Cross-domain problems occur (when cross-domain Settings have been made)

Solution: Check whether the encoding format supported by the background is the same as the encoding format sent by the front-end AXIos. If the encoding format is inconsistent, cross-domain problems will occur. As for why I don’t understand, it may be that the browser thinks inconsistent encoding is cross-domain or it may be a browser bug.

How to do it: Install a dependency called QS and then use qs.stringify() before sending the request.

NPM install QS

Import qs from ‘qs’

Set this in the request interface:

Export function userLogin(params){return service({method:'post', url:'/a/login', data: Qs.stringify (params), // This step is important! }).then((res)=>{return res.data}).catch((err)=>{console.log(err)}) }Copy the code

2. Multiple vUE routes are bound to the same component, causing created to be executed only once, that is, the page cannot be changed after a successful loading. Therefore, no matter how the route jump is triggered, the page only displays the data loaded for the first time.

After checking the data, the reason is that this is related to the life cycle of the vue, because most hook functions (mounted, computed…) are loaded successfully after the page is loaded. It doesn’t fire again, so the page feels like it didn’t jump.

Solution: In this case, there is no need to switch the page, just change the data in the page. Listen for routing address changes in the page and reload the data when the address changes.

Specific code:

watch: { '$route.path': function (to, from) { this.initInfo(); // Call the corresponding method}}Copy the code

3, el-tree control, mouse hand moved to the tree node, the mouse hand and node display does not correspond.

Cause: There is a problem with the style setting. Through F12 debugging, it is found that the height of a tree node is too high, so that other nodes are covered, so the height of this node is too high and the span is too large, so there will be a deviation between the mouse hand and the node position.

Solution: Modify the height of each tree node.

4, El-tree control, how to set the tree node select background color

Solution: add highlight-current

Set in style:

5. How do elder-UI components dynamically set the width of the list using el-Table

First, let’s talk about our problems:

Header data is also retrieved dynamically, so it is not easy to set a fixed width for each header, and the header is displayed using a V-for loop. The requirement is to make the width of the penultimate column wider and the width of the other columns narrower.

Specific implementation methods:

Add a width attribute to the table :width, and a method to customize the width of the column in method. Determine if a header field is the next-to-last, and then set the width, if not the other width. Here I used percentages to make the table widths adaptable to different browsers, but it didn’t work very well.

So you don’t want to use percentages but you want to be adaptive, so you have min-width, and you dynamically allocate the width when you set the minimum width.

At this time the effect is more ideal, the effect picture is as follows:

Copy the code

6, El-Tree control how to customize icon styles?

How can I change the icon from Figure 1 to Figure 2 and get the data from the background? Solution: there is an icon class that can be used to customize icon styles. At the beginning, I misunderstood it and added: as a dynamic property in front of the icon class. In fact, this is a class.

It can be used directly. You can get what you want. For specific values of class, see the built-in el icon

Element. The eleme. Cn / # / useful – cn/com…

7. When a form is used in an element-UI component, validate cannot be executed due to custom validation rules. Resolution: in custom rules

The custom rule must be followed by else{callback()} otherwise, callback cannot be called back. Validate () cannot be executed. If there are multiple validation rules, add else{callback()} to each rule.