本文总结了使用Vue2.0和Iview3.0开发过程中遇到的问题，包括Modal关闭、多个表单验证、Select选中值更新延迟、Table渲染和数据处理等，并提供了详细的解决办法。例如，通过Modal的loading属性控制关闭，用数组存储表单验证结果，更新Iview到最新版解决Select问题，以及在Table中自定义渲染各种组件如Switch、Button、Input等。
写在开头：本次项目采用的是vue2.0+iview3.0，最近公司没啥事，来总结一下开发过程中遇到的问题。
1、Modal关闭问题
需求背景：modal框里面是个form表单，点击确定之后，先验证form表单，验证通过则关闭modal框，验证不成功则提示用户，不关闭。
问题描述：本来刚开始想通过modal框v-model绑定的值(true或false)来进行控制，手动改之后，报错。
解决办法：
官方iview的modal组件的api里面有个loading属性，可通过控制loading的值来进行控制modal的显示。
举例说明：
注意： refuseLoading刚开始一定要设置为true。
这样的话就可以解决问题了。
衍生出来的问题：当关闭模态框之后，再次打开时，表单数据没有重置，还是上一次的数据。
解决办法：this.$refs[name].resetFields(); 重置表单数据，在关闭模态框的时候调用这个方法可解决。
2、同时验证多个表单问题
需求背景：一个页面有多个表单，提交的时候需要验证多个表单，都验证成功才能进行下一步操作
解决办法：用一个数组来存放每个表单的验证结果(true验证通过，false验证不通过)，最后循环这个数组如果值都为true，说明验证通过。
举例说明：页面有3个表单，需要同时验证，主要代码如下：
提交
name:'HelloWorld',
data() {return{
formValidate1: {
name:''},
formValidate2: {
name:''},
formValidate3: {
name:''},
ruleValidate: {
name: [
{ required:true, message: 'The name cannot be empty', trigger: 'blur'}
]
},
arr: []
}
},
methods: {
check(name){//验证表单是否通过
this.$refs[name].validate((valid) =>{if(valid) {this.arr.push(true); //arr 这个数组是用来存放单个表单的验证状态
} else{this.arr.push(false);
}
})
},
submit(){//提交
this.arr = []; //重置数组
//同时验证多个表单
this.check('formValidate1');this.check('formValidate2');this.check('formValidate3');var flag = null;for(var i = 0; i < this.arr.length; i++) {if(this.arr[i]) { //单个表单验证通过，继续验证下个表单
flag = true;continue;
}else { //单个表单验证不通过，结束
flag = false;break;
}
}if(flag){ //验证表单成功
alert("验证成功");
}else{
alert("验证失败")
}
}
}
}
3、Select 内的 Option 动态改变时，有时选中值未更新的问题
需求背景：Select的下拉数组是由后台返回的，选中的值也是后台返回的。正确赋值之后，select选中的值未更新。
解决办法：刚开始一直在不停的调试，有时候可能正确显示，有时候又不行。这个随机事件真的。。。。最后查阅官方文档，好吧，这是官方的坑，更新到iview最新版本后，问题得以解决。
这也给我以后很好的警示，有时候一些异常情况，可以先看哈官方的更新日志，因为我们刚开始做项目的时候，版本只是当时的最新版，一些问题可能官方后面已经修复了，所以应及时更新版本。
4、Table相关问题
(1)render函数的运用
参数解读：
h: vue Render函数的别名(全名 createElement)即 Render函数
params： table 该行内容的对象
props：设置创建的标签对象的属性
style：设置创建的标签对象的样式
on：为创建的标签绑定事件
scopedSlots：显示作用域插槽
a、Switch 开关
{
title:"可控开关",
key:"isOpen",
align:"center",
width:100,
render:(h, params)=>{return h('i-switch', {
props: {
value: params.row.isOpen? params.row.isOpen : false, //指定当前是否选中 Boolean类型 (isOpen后端返回字段，根据自己接口返回数据，自行修改)
},
scopedSlots:{
open: ()=> h('span', 'on'), //自定义显示打开时的内容
close: () => h('span', 'off') //自定义显示关闭时的内容
},
on: {/** 触发事件是on-change
* 参数value是回调值 Boolean类型*/
'on-change': (value) =>{this.data[params.index].isOpen = value; //赋值 data：表格数据
}
}
})
}
}
b、Button按钮
{
title:'操作',
key:'action',
width:150,
align:'center',
render: (h, params)=> { //按钮操作
return h('div', [
h('Button', {
props: {
type:'primary',
size:'small'},
style: {//自定义样式
marginRight: '5px'
最低0.47元/天 解锁文章
扫一扫
683
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
