关于赋值、js打开链接的方式、切割字符串、el-upload上传工具钩子函数、el-tabs使用在分页时注意

问题总结

一、代码保持最新版，否则就是自己挖坑埋自己

二、赋值时，判断返回数据是不是json串，是的话怎么处理，不是的话怎么处理

返回数据类似这种的：

"\"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""

判断和处理

	//判断
 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)
                        }
                    }
  	//处理     
  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: '身份证'+i, url: item[i] });
                            }
                        }
                    } else {
                    }

三、js打开链接的方式

1、新窗口打开链接

window.open(url)

2、原窗口打开链接

window.location.href(url)

四、切割字符串

split

//从逗号分割字符串
str.split(',')

slice

//切片,返回被提取的部分
str.slice(1,5)

五、element-ui上传工具钩子函数

场景设想：在一个修改原有数据的页面，此时需要将原有的上传的文件删除一部分，然后上传新文件

问题复现：这时，可能就会出现一种问题，原有的文件未被删除，新加文件放在了最后面

原因分析：这是因为在移除原有文件时，没有将这个字段重新赋值

1、移除的钩子

原有文件移除后，必须重新赋值

 handleRemoveSf(file){
 			//isurl是被删除的文件，item是原有文件数组
            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++){
                //遍历原有文件item，把不是被删除文件的文件push到新数组bb[]中
                if(item[i] != isUrl){
                    bb.push(item[i])
                }
            }
     		//将bb[]转成字符串，重新复制给shencard
            this.ruleForm.contractAddress = bb.toString();
        },

2、上传成功的钩子

新文件上传成功后，再重新赋值

 handleAvatarSuccess9(res, file) {
     //上传成功后重新赋值
            if(res.obj != "" && res.obj != null){
                this.ruleForm.contractAddress.push(res.obj);
            }
        },

3、点击被上传文件的钩子

点击查看图片，下载文件

handlePreview(file) {            var s=file.url;            // 判断url是否转义过，是否是能直接打开的链接            if(s.substring(0,1) != 'h'){                s=JSON.parse(s);                window.open(s);            }else{                window.open(s);            }        },

六、el-tabs使用在分页时注意

使用场景：

此处tab栏的待确认、已驳回调用接口一，已提交、已审批调用接口二。接口一的页码字段是（PageNum），接口二的页码字段是（PageNumber），并且接口一与接口二所需传入的字段也不同，如此一来，这个页面需要两个分页器，通过判断来决定使用哪个

值得注意的是：

在进行页面切换的，要注意吧，页面数据初始化一下，回到最初状态，如：页码、总页数、表格数据等，否则会导致页码混乱，数据混乱的情况

			<！--tab切换栏-->			
		<el-tabs v-model="orderStatus" type="card" @tab-click="tabClick">                
			<el-tab-pane label="待确认" name="1"></el-tab-pane>                
			<el-tab-pane label="已驳回" name="2"></el-tab-pane>                
			<el-tab-pane label="已提交" name="3"></el-tab-pane>                
			<el-tab-pane label="已审批" 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(){//调用接口，获取返回数据，给tableData赋值。}
    }