===================================正文分割线==================================
1.switch 值取为0或1 的方法
<i-Switch v-model="formAdd.kgzt" true-value="1" false-value="0"></i-Switch>使用 true-value 和 false-value 定义
2.日期选择控件datePicker格式——date格式化时间
通过on-change方法重新赋值
注意：
value和@on-change事件来绑定即可，(注意，用@on-change来获取时间的时候，就不能加v-model了，不然获取的时间还是老样子）——参考 https://blog.csdn.net/idomyway/article/details/90417012 的文章
<Date-Picker ref="kssj" :value="formAdd.kssj" type="datetime" placeholder="选择开始日期" @on-change="changedate('kssj',$event)"></Date-Picker>//表单中的日期格式化
changedate: function(name,event){
this.formAdd[name]=event;
}格式化前：
格式化后：
3.数组操作
1）组转json字符串
JSON.stringify(self.data1)2）数组转字符
var arr = ['123','456'];
var string = arr.toString();
console.log(string); //输出 "123,456"或
var arr = ['123','456'];
var string = arr.join(',');
console.log(string); //输出 "123,456"
3）字符转数组
var string = "123,456";
var arr = string.split(',');
console.log(arr); //输出 ['123','456']字符串转数组前，要判断下是否为空字符串
if(res.nj != '' && res.nj != null){
self.formAdd.njlist = res.nj.split(',');
}4）多个单独字符串，放到一个数组中
var timeArray = new Array(res.str1, res.str2);
console.log(timeArray);
// res.str1: '2020-04-09 00:00:00'
// res.str1: '2020-04-20 00:00:00'
//console结果：['2020-04-09 00:00:00', '2020-04-20 00:00:00']
5）数组循环赋值
注意在循环push赋值前，先清空数组，防止造成数据重复
$.each(arr,function(index, value){
self.queryform.ids.push(value.kcdm);
});push容易会产生重复数据，为了方便，可以重新写push方法，使用参考如下：
https://www.cnblogs.com/fanbi/p/9013415.html
数组去重问题：（例：选择指导教师，当重新选择时会遇到去重的问题）
//第一种
//已选数组和新选的数组 未合并 比较
selectJs: function(arr){
var self = this;
var arr2 = self.jsList;
var arrnew = [];
for(var i=0; i<arr.length; i++){
var flag = 1;
for(var j=0; j<arr2.length; j++){
if(arr2[j].zgh == arr[i].zgh){
flag = 0;
}
}
if(flag){
arrnew.push(arr[i]);
}
}
self.jsList = self.jsList.concat(arrnew);
},
// 第二种
//已选数组和新选的数组 已合并 比较
selectJs: function(arr){
var self = this;
var arrChoose = self.jsList;
$.each(arr, function(i,value){
arrChoose.push(value);
})
var arrnew = [];
var arrId = [];
for(var item of arrChoose){
if(arrId.indexOf(item['zgh']) == -1){
arrId.push(item['zgh']);
arrnew.push(item);
}
}
}
6）对象数组：如何把两串字符串分别放到对象中，然后组成数组的形式
例如：后台返回的是教师职工号 “2001021，2001022”，教师姓名：“张某某，李某某”，两串字符存在对应关系，现在想要把这种对应关系体现在一个对象数组中，实现思路如下：
a）定义两个数组，把两个字符串分别转换成数组 a 和 b ，并定义新数组 c，用来放合成后的对象；
b）使用 $.each() 循环其中一个数组，在循环过程中，先定义一个对象 obj ，然后把对应的数组里放进对象中；
if(res.zgh !=null && res.zgh!=''){
var a =res.zgh.split(',');
var b =res.zgxm.split(',');
var c = new Array();
$.each(a, function(index,value){
var obj = new Object();
obj.zgh = a[index];
obj.xm = b[index];
c.push(obj);
});
}7）对象循环赋值
例如：修改表单操作，保存时请求的 form 中的参数（如图一）与后台返回的表单参数不同（如图二），规律是差 ‘p_’ ，此时需要对对象循环赋值
8）对象数组，相同 id 值求和
var self = this;
var newArr = []; //定义新数组，存相同 id 数据
var rs = 0; // 人数
$.each(self.cflist, function(i,value){
$.each(value.sjlist, function(j,value2){
var bjdm = value2.bjdm;
var tmpval = {};
$.extend(tmpval,value2);
if( self.checkname(bjdm, newArr) ){ // newArr中没有相同 id, push进入
newArr.push( tmpval )
}else{ // newArr中有相同 id, 循环newArr数组进行计算
var b = Number(value2.cfrs);
for( var e = 0; e<newArr.length; e++ ){
if( newArr[e].bjdm == bjdm ){
rs = Number(newArr[e].cfrs);
rs +=b;
newArr[e].cfrs = rs;
}
}
}
})
})
// 判断 newArr 中 是否有相同 id
// 有的话 返回false
checkname: function (bjdm,arr) {
for(var t = 0; t< arr.length;t++){
if(arr[t].bjdm === bjdm){
return false;
}
}
return true;
},
4.Table的使用
a）获取选中的项—getSelection
<i-table ref="selection" :data="data1" :columns="columns1" :height="TableHeight">var arr = this.$refs.selection.getSelection();
console.log(arr);
getSelection 取到的是对象数组
b）出现横向滚动条，需要指定每一列的宽度，可以给其中一列 minWidth 来自适应宽度
c) 表格中使用 slot 插入表单，如下图：
涉及数据修改后，后台数据同步的问题，table 作为父组件可以把值赋给每一行表单，
然而，当表单数据更改时，应使用@on-change事件进行当前行数据的重新赋值
<i-table ref="selection" :data="data1" :columns="kccolumns" :loading="loading" >
...
<template slot="xs" slot-scope="handlexs">
<Input-Number :min="0" v-model="handlexs.row.xs" @on-change="changedata(handlexs.row,handlexs.index)"></Input-Number>
</template>
...
</i-table>
changedata:function(el,index){
var self=this;
self.data1[index] = el;
},d) 表格中列的显示与隐藏：
根据条件不同显示不同的列，通过设置hidden属性及filter函数来控制列的显示隐藏
{ title:'课程名称', key:'kcmc_kcjs', width:150,hidden:true},computed:{
//根据条件判读是否显示列
Columns1: function(){
var self = this;
return self.columns.filter(function(e){
if(e.key!=undefined && e.key != null && e.key != ''){
//根据pjrylx显示列
if(e.key == '_disabled' && self.queryform.pjrylx == 'gld'){
e.hidden = false;
}else if(e.key == '_disabled' && self.queryform.pjrylx == 'self'){
e.hidden = true;
}
//根据xmlb显示列
if(e.key.indexOf('_kcjs') != -1 && self.queryform.xmlb == 'kcjs'){
e.hidden = false;
}
}
return !e.hidden;
})
}
},
5.upload上传文件的使用
1) 上传文件
<!--html 上传附件按钮-->
<div v-show="showflag">
<Upload ref="upload"
:before-upload="handleUpload"
:action="baseUrl + 'Jxyj_xmsb/updXmsbzjsb'" :headers="{'RoleCode':G_JSDM}"
:data="addform" :on-success="upSuccess">
<i-Button icon="ios-cloud-upload-outline"><@s.message code="KCGL.scfj"/></i-Button>
</Upload>
<span v-if="addform.file != null">{{ addform.file.name }}</span>
<span v-else>{{ addform.zjfjmc }}</span>
</div>//上传文件
handleUpload: function(file){
var self = this;
self.addform.file = file;
return false; //要写上，阻止自动上传文件
}
//上传成功后
upSuccess:function(res){
var self = this;
if(res.jg == "1"){
...
self.addform.file=null; //保存成功的时候，清空已上传的文件列表
self.$refs.upload.clearFiles();
self.query(); //刷新列表查询
self.modal_xc = false;
}else{
...
}
}
//保存表单及附件
//保存的时候，要分情况
save: function(){
if(self.addform.file != null){
//有上传文件
self.$refs.upload.post(self.addform.file);
}else{
//无上传文件
$.post(){ ... }
}
2）下载文件
<!--html文件名链接-->
<form name="xzfjform" method="post"></form>
<a href="#" @click="downloadfj(addform.sbfjid,'')">{{ addform.sbfjmc }}</a>
//js下载附件
downloadfj: function(fjid){
document.xzfjform.action=baseUrl+'Upload_pub/downLoadByFjId/'+fjid+'/t_jxyj_fjb';
document.xzfjform.submit();
}
扫一扫
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
