iview前端向后端传数据一直转圈_记一次开发过程中，iview遇到的一些坑以及解决办法...

写在开头：本次项目采用的是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'