校验:
1:前台校验 不需要使用req,直接在校验规则中 用true 和false 在校验.
否则就会造成校验两次的.
2: <el-form : 上设置abel-width 表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值.
<el-form :model="actualBeneficiary" label-width="100px" :rules="rules" ref="actualBeneficiary">3: 设置默认
按钮:
<template slot-scope="scope">
<el-button size="small" class="default" :class="{ active:indexClass == scope.$index }"
@click="defaultLinkman(scope.$index, scope.row)">设为默认经办人
</el-button>
</template>
事件:
defaultLinkman(index, row) {
//设置默认经办人标识位
row.defaultLinkMainInfo = '1';
this.$notify({
title: '默认经办人设置成功',
message: '',
type: 'success'
});
this.indexClass = index;
},
样式:
.default {
color: #404040;
background: #f8f8f8;
}
.active {
color: #fff;
background: #0066cc;
}4: 数组删除:
按钮:
<template slot-scope="scope">
<el-button size="small" @click="deleteLinkman(scope.$index, scope.row)">删除</el-button>
</template>
事件:
deleteLinkman(index, row) {
this.custLinkMainInfoList.splice(index, 1);
},
splice方法:
splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）
index:数组开始下标
len: 替换/删除的长度
item:替换的值，删除操作的话 item为空5:校验:
校验的是 ref的名字要和 $resf 一样. 然后在写事件的是传入参对象的时候要记得加 '' 不然校验不了
代码按钮:
<el-button type="primary" @click="saveActualBeneficiary('actualBeneficiary')">确 定</el-button>
方法:
saveActualBeneficiary(actualBeneficiary) {
console.log(this.$refs[actualBeneficiary]);
this.$refs[actualBeneficiary].validate((valid) => {
if (valid) {
if (this.saveOrUpdateFlag === 0) {
//新增
this.actualBeneficiarys.push(this.actualBeneficiary);
} else {
//修改
}
this.actualDialogFormVisible = false;
} else {
return false;
}
});
},
如果是时间类型的话,要把rules的校验规则改为string类型的不然校验通不过.
错误样式:
Error in event handler for "el.form.change": "TypeError: dateObject.getTime is not a function"
vue.esm.js?efeb:1687 TypeError: dateObject.getTime is not a function
原因可能是：elementUI自带的格式转换后会将绑定值转为字符串，而校验规则中的【type: 'date'】已经不匹配，至于它的报错是因为转换为字符串，不是date对象所以没有getTime这个方法了。重点修改:
当我们想要修改某个元素时，可以把这个位置上的数据取出来放到弹层里（或者其他某个位置），在弹层里的信息可以取消或者修改后进行保存。
原文地址：http://www.xiabingbao.com/vue/2017/07/10/vue-curd.html
假设我们弹层里的数据是selectedlist，那么每次修改时，把index位置的数据给了selectedlist，然后在弹层中修改selectedlist。我们也能看到修改数据的类型： 文本框（用户名，邮箱），单选按钮（性别），select选择框（所在省份），多选框（爱好），这里我们主要练习的是表单处理（https://cn.vuejs.org/v2/guide/forms.html）。弹层是否显示用变量isActive来控制：
// 修改数据
modifyData(index) {
this.selected = index; // 修改的位置
this.selectedlist = this.list[index];
this.isActive = true;
}
有没有发现一个问题，当修改弹层中的信息时，表格中的数据也同步更新了。可是我们本身是希望当点击保存按钮时，才把弹层中的数据保存到表格里。问题的根源就出在这里：
this.selectedlist = this.list[index];
因为list[index]是个Object类型的数据，若使用=赋值，则赋值操作为浅度拷贝（把数据的地址赋值给对应变量，而没有把具体的数据复制给变量，变量会随数据值的变化而变化），selectedlist与list[index]使用相同的数据地址，互相引起数据值的变化。因此这里我们需要进行深度拷贝：
this.selectedlist = JSON.parse( JSON.stringify(this.list[index]) ); // 先转换为字符串，然后再转换
当用户修改数据后，selectedlist就会发生变化，点击保存按钮时，将数据重新保存到index位置：
/*
this.list 数据数组
this.selected 刚才修改的位置
this.selectedlist 需要保存的数据
*/
Vue.set(this.list, this.selected, this.selectedlist);7:导入 import Vue from 'vue'
8:表单提示:
[Element Warn][Form]model is required for validate to work!该提示说的是 form表单需要一个绑定一个 对象(使用:model="" 不能使用v-model=""),
9.表单通过父组件传值来disabled表单
首先在给表单添加 :disabled="disabledFlag"属性.
然后接受父组件传递过来的标志位 props: ['disabledFlags'],
然后在给给页面标识位声明一个默认值 disabledFlag:false,
把父组件传过来的值赋值给页面的标志位就可以了.
created(){
this.disabledFlag = this.disabledFlags;
},
10.子组件互相传值
1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据
2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。
3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。
4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。
步骤:
(1):我们可以创建一个单独的js文件eventVue.js,内容如下
import Vue from 'vue'
export default new Vue
(2)首先都要导入 import bus from "../../components/eventBus.js"
(3):子组件一: var basicsInfo = response.data.basicsInfo; //基本信息
bus.$emit("basicsInfoData",basicsInfo);
发送事件数据
(4):子组件二:
直接写mounted监听 message就是你传递的数据
mounted(){
bus.$on("bankCardInfoData",(message)=>{
console.log("银行卡信息赋值");
this.bankCardInfo= message;
})
},
(5):在有的地方this 是undefined 就要用 _this
5、疑问:我可以让子组件三号发送一号组件的名字然后给二号组件发送数据吗? 待测试.11.给对象动态添加属性:
bus.$on("modifyFlagData",(message)=>{
console.log("修改标识位");
var modifyFlagArray = message.split('|');
for(var j = 0,len = modifyFlagArray.length; j < len; j++){
_this.modifyFlag[modifyFlagArray[j]]=true;
}
console.log(_this.modifyFlag);
})12. 子组件之间传值用bus会有多次调用的问题.所以更改调用方式,使用子传给父,父在传给子.子组件用watch监听数据.
子组件一号是用$emit的形式触发
this.$emit("templateData", this.assessmentsData);
父组件:
v-on:是子组件触发的名字 等号后面的是 父组件自己的方法
<query-template v-on:templateData="templateData"></query-template> 使用v-on把事件绑定.
然后在父组件中写一个templateData 的方法. 括号里面就是 你从子组件中传过来的数据.然后把子组件的值赋值给父组件的变量,然后在从父组件 传给子组件二号
templateData(assessmentsData){
this.assessmentsData= assessmentsData;
}
子组件二号:
在子组件二号的标签上加上 v-bind:tempalate="assessmentsData" tempalate就是传递的变量名字.等号后面就是你要传递的变量.
在二号子组件中用prop加上
props: ['tempalate'],
然后在写一个watch(); watch和method平级 在watch 中要加 deep: true !!!
watch: {
tempalate(val, oldValue) {
debugger;
this.assessmentsData = val;
},
deep: true
},
然后val 就是你传递过来的是, oldValue就是之前的值.
用$emit 发送数据
然后用watch监听 这样就能实现子父子的传递参数了.
注意:
1.组件传值的时候 名字要一致.
2.记得watch的时候要写 deep: true.
13.vue.js 统一关闭页面的方法:
调用传递参数:
closeWindow(){
//关闭当前页面
let view = {};
view.path = '/counter/account/servicecentre/riskassessment';
view.name = '风险测评';
this.baseCloseCurrentPage(view)
}
// 公共方法 关闭当前页面
baseCloseCurrentPage(view) {
this.$store.dispatch('delVisitedViews', view).then((views) => {
const latestView = views.slice(-1)[0]
if (latestView) {
this.$router.push(latestView.path)
} else {
this.$router.push('/')
}
})
this.$parent.$router.push({path: view.path})
},
delVisitedViews({ commit, state }, view) {
return new Promise(resolve => {
commit('DEL_VISITED_VIEWS', view)
resolve([...state.visitedViews])
})
},14.foreach循环 数组本身的索引
forEach方法中的function回调有三个参数：第一个参数是遍历的数组内容，第二个参数是对应的数组索引，第三个参数是数组本身.
[].forEach(function(value,index,array){
//code something
});
例子:
var arr = [1,2,3,4];
arr.forEach(function(value,index,array){
array[index] == value; //结果为true
sum+=value;
});
console.log(sum); //结果为 1015.前端解决ajax调用异步的问题.
deleteInfo(node, data){
let queryReq = {};
queryReq.orgNo = data.orgNo;
queryReq.queryTemplate = "role_user";
let urlKey = 'common/query/queryDataList';
this.$store.dispatch('EASYPOST', {
'urlKey': urlKey,
data: queryReq
}).then(response => {
this.rowLength = 0;
this.rowLength = response.data.rows.length;
//在这里面直接只用 this.rowLength的时候 值获取的都是上一次的值.
this.confirmTitle(node, data);
}).catch(error => {
this.$message.error(error.message)
})
console.log('length',this.rowLength);
},
//所以就在写一个方法,让它继续执行.在这里米娜在进行判断
confirmTitle(node, data){
let title = '';
if (this.rowLength >0){
title = '角色下有'+this.rowLength+'名员工是否确认要删除?'
}else{
title = '【' + data.label + '】是否确认要删除?'
}
this.$confirm(title, '删除', {
type: 'warning'
}).then(() => {
this.deleteTree(node, data)
}).catch(() => {
})
},将调用结果嵌套到下一个方法里面.
16.表单的动态校验
:validate-on-rule-change="false"17.组织数据
let idList = []
if (this.formParams.datas) {
this.formParams.datas.forEach(item => {
idList.push(item.id)
})
}
let request = {
idList: JSON.stringify(idList),
batchLeaveData: this.batchLeaveData.batchLeaveDatas,
}
前端拼成json字符串 --> 后台用String接受.
然后使用 JSONArray split = JSONArray.parseArray(idList);
转成jsonArray 遍历的时候使用 .size
遍历使用的时候 ,直接用 .toString 或者 .getString 方法.18.前端重置表单
通过refs. 表单的ref属性名 调用resetFields 方法就可以了.
this.$refs.batchLeaveData.resetFields();
用处: 每次进入子组件的时候,表单的信息还在.