Problem summary

1, Keep the code up-to-date, or you'll dig your own hole and bury yourself

2, During assignment, judge whether the returned data is a json string. If yes, how to deal with it and if not, how to deal with it

Return data similar to this:

"\"https://static.xinchacha.com/jiamibao/3ee77d0f-7ebd-429a-b130-8fea047389a7.jpg?Expires=3204882106&OSSAccessKeyId=LTAI4GFjBCimq7VBgRQ5LKfq&Signature=DFgRbyBfnojc595zLsNDqYWWM28%3D,https://static.xinchacha.com/jiamibao/3ee77d0f-7ebd-429a-b130-8fea047389a7.jpg?Expires=3204882106&OSSAccessKeyId=LTAI4GFjBCimq7VBgRQ5LKfq&Signature=DFgRbyBfnojc595zLsNDqYWWM28%3D""

Judgment and handling

	//judge
 if (_this.ruleForm.shencard.substring(0,1) == 'h') {
                        _this.ruleForm.shencard = _this.ruleForm.shencard
                    }else{
                        if (_this.ruleForm.shencard != '') {
                            _this.ruleForm.shencard = JSON.parse(_this.ruleForm.shencard)
                        }
                    }
  	//handle     
  if (_this.ruleForm.shencard != '') {
                        var item = ""
                        if(_this.ruleForm.shencard.length > 20){
                            item = _this.ruleForm.shencard.split(",")
                        }else{
                            item = _this.ruleForm.shencard
                        }
                        for (var i = 0; i < item.length; i++) {
                            if (item[i] != '' && item[i] != null) {
                                _this.fileList1.push({ name: 'ID'+i, url: item[i] });
                            }
                        }
                    } else {
                    }

3, js how to open links

1. New window open link

window.open(url)

2. Open link from original window

window.location.href(url)

4, Cut string

split

//Separating strings from commas
str.split(',')

slice

//Slice and return the extracted part
str.slice(1,5)

5, Element UI upload tool hook function

Scenario scenario: on a page of modifying the original data, you need to delete part of the original uploaded file, and then upload a new file

Problem recurrence: at this time, there may be a problem that the original file has not been deleted and the newly added file is placed at the end

Cause analysis: This is because this field is not re assigned when removing the original file

1. Removed hook

After the original file is removed, it must be re assigned

 handleRemoveSf(file){
 			//isurl is the deleted file, and item is the original file array
            var isUrl = file.response != undefined?  file.response.obj : file.url;
            var item = this.ruleForm.contractAddress.split(',');
            var bb = [];
            for(var i=0;i<item.length;i++){
                //Traverse the original file item and push the file that is not the deleted file into the new array bb []
                if(item[i] != isUrl){
                    bb.push(item[i])
                }
            }
     		//Convert bb [] into a string and copy it to shencard again
            this.ruleForm.contractAddress = bb.toString();
        },

2. Successfully uploaded hook

After the new file is uploaded successfully, re assign the value

 handleAvatarSuccess9(res, file) {
     //Reassign after successful upload
            if(res.obj != "" && res.obj != null){
                this.ruleForm.contractAddress.push(res.obj);
            }
        },

3. Click the hook of the uploaded file

Click to view the picture and download the file

handlePreview(file) {            var s=file.url;            // Judge whether the url has been escaped and whether it is a link that can be opened directly. If (S. substring (0,1)! = ' h'){                s=JSON.parse(s);                window.open(s);            } else{                window.open(s);            }        },

6, When using El tabs, pay attention to

Usage scenario:

The calling interface I to be confirmed and rejected and the calling interface II submitted and approved in the tab column here. The page number field of interface 1 is (PageNum), and the page number field of interface 2 is (PageNumber), and the fields that interface 1 and interface 2 need to pass in are also different. In this way, this page needs two pagers to determine which to use through judgment

It is worth noting that:

During page switching, you should pay attention to the initialization of page data and return to the original state, such as page number, total pages, table data, etc., otherwise page number and data will be confused

			<!--tab Toggle bar-->			
		<el-tabs v-model="orderStatus" type="card" @tab-click="tabClick">                
			<el-tab-pane label="To be confirmed" name="1"></el-tab-pane>                
			<el-tab-pane label="Rejected" name="2"></el-tab-pane>                
			<el-tab-pane label="Submitted" name="3"></el-tab-pane>                
			<el-tab-pane label="Approved" name="4"></el-tab-pane>            
		</el-tabs>                         
		<div class="pagination" v-if="parseInt(tabObj.status) == 1 || parseInt(tabObj.status) == 2">               
		 <el-pagination  
		 	background                    
		 	@current-change="FenyeChange"                    
		 	:current-page="tabObj.PageNum"                    
		 	layout="prev, pager, next"                   
		 	:total="totalCount"               
		 	></el-pagination>            
		 </div>            
		 <div class="pagination" v-if="parseInt(tabObj.status) == 3 || parseInt(tabObj.status) == 4">
		 <el-pagination  
		   background                    
		   @current-change="FenyeChange2"                   
		   :current-page="upDataObj.PageNumber"                   
		   layout="prev, pager, next"                    
		   :total="totalCount"                
		   ></el-pagination>            
		  </div>

export default {    
data() {        
return {            
tabObj: {PageNum: '1', status: '1'},
upDataObj: {type: '3',PageNumber: 1, PageSize: 10},
tableData:[],
totalCount: 0 
}    
},
methods: {        
	tabClick() {
		this.tabObj= {PageNum: '1',status: '1'},
		this.upDataObj= {type: '3', PageNumber: 1,PageSize: 10}
		this.tableData=[];
		this.totalCount=0;
		this.tabObj.status = this.orderStatus;
		this.init();},
		init(){//Call the interface to get the returned data and assign a value to tableData.}
    }