写在开头：本次项目采用的是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个表单，需要同时验证，主要代码如下：
<template>
<div class="hello">
<Form ref="formValidate1" :model="formValidate1" :rules="ruleValidate">
<FormItem label="Name" prop="name">
<Input v-model="formValidate1.name" placeholder="Enter your name"></Input>
</FormItem>
</Form>
<Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate">
<FormItem label="Name" prop="name">
<Input v-model="formValidate2.name" placeholder="Enter your name"></Input>
</FormItem>
</Form>
<Form ref="formValidate3" :model="formValidate3" :rules="ruleValidate">
<FormItem label="Name" prop="name">
<Input v-model="formValidate3.name" placeholder="Enter your name"></Input>
</FormItem>
</Form>
<Button @click="submit">提交</Button>
</div>
</template> <script>
export default {
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("验证失败")
}
}
}
}
</script> <style scoped></style>
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'
},
on: { // 自定义事件
click: () => {
this.show(params.index) // params.index是拿到table的行序列，可以取到对应的表格值
}
}
}, '查看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
]);
}
}
c、Input 输入框
{
title: "input输入框",
key: "inputText",
align: "center",
render:(h, params) => {
return h('Input', {
props: {
value: params.row.inputText ? params.row.inputText : '',
size: 'small'
},
on: {
'on-blur': (event) => { // 输入框失去焦点时触发
this.data[params.index].inputText = event.target.value; // 赋值 data：表格数据
}
}
});
}
}
d、Select 下拉框
{
title: 'select下拉框',
key: 'selectText',
align: 'center',
render: (h, params) => {
return h('Select',{
props:{
value: params.row.selectText ? params.row.selectText : '',
size: 'small'
},
on: {
'on-change':(value) => { // 下拉框选定的值
this.data[params.index].selectText = value;
}
}
},
/**
* this.selectAction 下拉框Option数组
* selectAction:[
{
value: '01',
name:'select_1'
},
{
value: '02',
name:'select_2'
}
]
*/
this.selectAction.map((item) =>{ // 下拉选项
return h('Option', {
props: {
value: item.value,
label: item.name
}
})
})
)
}
}
e、Rate评分
{
title: "评分",
key: "rate",
align: "center",
render:(h, params) => {
return h('Rate', {
props: {
value: Number(params.row.rate), // 当前 star 数 Number类型
'allow-half': true, // 可以选中半星
disabled: false // 是否只读
},
on: {
'on-change': (value) => { // 评分改变时触发
this.data[params.index].rate = value; // 赋值 data：表格数据
}
}
})
}
}
f、Img图片
{
title: "头像",
key: "avatar",
align: "center",
width: 100,
render:(h, params) => {
return h('Avatar', { // 也可用原生img标签代替
style: {
width: '30px',
height: '30px',
'border-radius': '50%'
},
attrs: {
src: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
}
})
}
}
g、DatePicker时间选择器
{
title: "时间选择器",
key: "date",
align: "center",
render:(h, params) => {
return h('DatePicker', {
props: {
value: params.row.date,
size: 'small',
type: 'datetime'
},
on: {
'on-change': (value) => { // 输入框失去焦点时触发
this.data[params.index].date = value; // 赋值 data：表格数据
}
}
});
}
}
h、对数据进行处理
比如，后端返回时间是时间戳格式，展示给用户看的肯定不能是时间戳，这时候就需要我们对数据进行处理
{
title: "申请年份",
align: "center",
key: "applyDate",
render: (h, params) => {
return h('span', {
}, new Date(params.row.applyDate).getFullYear()) // 对后端返回的时间戳进行处理，返回页面需要展示的格式
}
}
差不多就总结了这几个，写多了就发现，是一样的模板，直接套到render函数里面就是了。想要更多的学习render函数相关的，可以自己前往官网学习。
完整代码：
<template>
<div class="hello">
<Table border :columns="columns" :data="data"></Table>
</div>
</template> <script>
export default {
name: 'HelloWorld',
data() {
return {
columns: [ // 表格列的配置描述
{
title: "头像",
key: "avatar",
align: "center",
width: 100,
render:(h, params) => {
return h('Avatar', { // 也可用原生img标签代替
style: {
width: '30px',
height: '30px',
'border-radius': '50%'
},
attrs: {
src: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
}
})
}
},
{
title: "时间选择器",
key: "date",
align: "center",
render:(h, params) => {
return h('DatePicker', {
props: {
value: params.row.date,
size: 'small',
type: 'datetime'
},
on: {
'on-change': (value) => { // 输入框失去焦点时触发
this.data[params.index].date = value; // 赋值 data：表格数据
}
}
});
}
},
{
title: "input输入框",
key: "inputText",
align: "center",
render:(h, params) => {
return h('Input', {
props: {
value: params.row.inputText ? params.row.inputText : '',
size: 'small'
},
on: {
'on-blur': (event) => { // 输入框失去焦点时触发
this.data[params.index].inputText = event.target.value; // 赋值 data：表格数据
}
}
});
}
},
{
title: 'select下拉框',
key: 'selectText',
align: 'center',
render: (h, params) => {
return h('Select',{
props:{
value: params.row.selectText ? params.row.selectText : '',
size: 'small'
},
on: {
'on-change':(value) => { // 下拉框选定的值
this.data[params.index].selectText = value;
}
}
},
/**
* this.selectAction 下拉框Option数组
* selectAction:[
{
value: '01',
name:'select_1'
},
{
value: '02',
name:'select_2'
}
]
*/
this.selectAction.map((item) =>{ // 下拉选项
return h('Option', {
props: {
value: item.value,
label: item.name
}
})
})
)
}
},
{
title: "申请年份",
align: "center",
key: "applyDate",
render: (h, params) => {
return h('span', { }, new Date(params.row.applyDate).getFullYear()) // 对后端返回的时间戳进行处理，返回页面需要展示的格式
}
},
{
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：表格数据
}
}
})
}
},
{
title: "评分",
key: "rate",
align: "center",
render:(h, params) => {
return h('Rate', {
props: {
value: Number(params.row.rate), // 当前 star 数 Number类型
'allow-half': true, // 可以选中半星
disabled: false // 是否只读
},
on: {
'on-change': (value) => { // 评分改变时触发
this.data[params.index].rate = value; // 赋值 data：表格数据
}
}
})
}
},
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => { // 按钮操作
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: { // 自定义样式
marginRight: '5px'
},
on: { // 自定义事件
click: () => {
this.show(params.index) // params.index是拿到table的行序列，可以取到对应的表格值
}
}
}, '查看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
]);
}
}
],
data: [ // 表格数据
{
inputText: '18',
isOpen: false,
selectText : '02',
rate: 4,
date: '2019-02-03 00:08:45',
applyDate: 1551835636920
},
{
inputText: '',
isOpen: true,
selectText : '01',
rate: 1.5,
date: '',
applyDate: 1506124800000
}
],
selectAction:[
{
value: '01',
name:'select_1'
},
{
value: '02',
name:'select_2'
}
] }
},
methods: {
show (index) { // 查看
this.$Modal.info({
title: '查看',
content: '查看详情'
})
},
remove (index) { // 删除
this.data.splice(index, 1);
}
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
width: 90%;
margin: 0 auto;
padding: 20px 50px 0;
}
</style>
（2）selection的多选来做单选：
通过给 columns 数据设置一项，指定 type: 'selection'，即可自动开启多选功能，但是有些产品觉得iview的单选效果不好，非要用selection的来做单选。以下是解决方案：
{
title: '选择',
align:'center',
key: 'checkBox',
width: 80,
render:(h,params)=>{
return h('div',[
h('Checkbox',{
props:{
value: params.row.checkBox
},
on:{
'on-change':(e)=>{
this.data.forEach((item)=>{ // 先取消所有对象的勾选，checkBox设置为false
this.$set(item, 'checkBox', false);
});
this.data[params.index].checkBox = e; // 再将勾选的对象的checkBox设置为true
}
}
})
])
}
}
（3）结合Page分页组件一起使用
一般来讲，在表格数据比较多的情况下，会对表格进行分页展示
<Table border :columns="columns" :data="data"></Table>
<Page style="float: right;margin-top:20px" :total="page.total" :current="page.current" :page-size="page.size" @on-change="changePage" @on-page-size-change="changePageSize" show-total show-elevator show-sizer />
分页一般有2种：前端分页、后端分页。前端分页就是前端一次性拿到所有数据，再对拿到的数据进行分页展示。后端分页就是前端一次只拿一页的数据展示，分页的时候再次请求后端。
mounted(){
this.changeTableData();
},
methods: {
changePage(current){ // 页码改变的回调，返回改变后的页码
this.page.current = current;
this.changeTableData();
},
changePageSize(size){ // 切换每页条数时的回调，返回切换后的每页条数
this.page.current = 1;
this.page.size = size;
this.changeTableData();
},
changeTableData(){
/**
* page定义
* page: {
total: 0, 总数
current: 1, // 当前页码
size: 10 // 每页个数
}
*
*
* data: 表格展示数据
* tableData： 后端返回的所有数据
*
*/
// 前端分页
let _start, _end;
let page = this.page;
_start = (page.current - 1) * page.size;
_end = page.current * page.size;
this.data = this.tableData.slice(_start, _end);
page.total = this.tableData.length;
// 后端分页
// ajax请求后端接口，重新获取数据
}
}
使用了type=index，分页之后，索引还是从1开始，如何实现累加呢？
使用render函数可解决：
{
title: '序号',
align:'center',
type: 'index2',
width: 80,
render: (h, params) => {
return h('span', params.index + (this.page.current - 1) * this.page.size + 1);
}
}
在翻页之后，如何记住checkbox多选的选中和未选中状态？
用一个数组checkData来装选中的数据，在每次表格数据改变时，通过比对数据来进行回填选中状态。
<Table border :columns="columns" :data="data" @on-select="changeSelect" @on-select-cancel="changeSelectCancel" @on-select-all="changeSelectAll" @on-select-all-cancel="changeSelectAllCancel"></Table>
methods: {
changeSelect(data, val){ // 选中某个数据
/**
* checkData 多选框选中的数组
* id 每条数据的唯一标识
*/
for(let i in this.checkData){
if(val.id === this.checkData[i].id){
this.checkData.splice(i, 1);
break;
}
}
this.checkData.push(val);
},
changeSelectCancel(data, val){ // 取消某个数据
for(let i in this.checkData){
if(val.id === this.checkData[i].id){
this.checkData.splice(i, 1);
break;
}
}
},
changeSelectAll(data){ // 多选选中
let arr = [];
for(let i in data){
let flag = true;
for(let y in this.checkData){
if(data[i].id === this.checkData[y].id){ // 已有数据
flag = false;
break;
}else{
continue;
}
}
if(flag){ // 添加新数据
arr.push(data[i]);
}
}
this.checkData = this.checkData.concat(arr);
},
changeSelectAllCancel(data){ // 多选取消
for(let i in this.data){ // 取消当前页的内容
for(let y in this.checkData){
if(this.data[i].id === this.checkData[y].id){
this.checkData.splice(y, 1);
break;
}
}
}
},
},
watch:{
'data':{
handler:function(newValue, oldValue){
this.data = newValue;
for(let i in this.data){
let flag = false;
for(let y in this.checkData){
if(this.data[i].id === this.checkData[y].id){
flag = true;
break;
}else{
continue;
}
}
if(flag){ // 回填选中状态
this.data[i]._checked = true;
}else{
this.data[i]._checked = false;
}
}
},
deep:true
}
}
5、定制iview主题
按照官网，一步一步做的，最后却报错：
那是因为less的版本过高，重新卸载，安装3.0以下的版本(比如2.7.3版本)，即可解决问题。
六、合并表格单元行
官网已经提供了表头分组的api。可是我们想合并单元行列怎么办呢，虽然官网没提供api，但是好在我们可以用render函数自定义渲染行列。
1、合并行
{
title: '合并行',
align:'center',
key: 'content',
render: (h, params) => {
let a = ['数学','语文'];
return this.renderData(h, a);
}
} // 下面为渲染方法
renderData(h, a){
let b = [];
a.map((val, index) => {
b.push(h("p", {
style: {
height: "40px",
lineHeight: "40px",
"width": "100%",
"display": "block",
"padding": "0 10px",
borderBottom: a.length !== index + 1 ? "1px solid #e8eaec" : "none"
}}, val)
)
})
return b;
}
2、合并列
{
title: '姓名,昵称',
align:'center',
key: 'name',
renderHeader: (h, params) => { // 自定义表头
let a = ['姓名', '昵称'];
return this.renderColumnData(h, a);
},
render: (h, params) => {
let a = ['张三', '李四'];
if(params.row.same){ // 名字姓名相同
a = ['王二麻子'];
}
return this.renderColumnData(h, a);
}
},
// 下面为渲染的方法
renderColumnData(h, a){ // 渲染合并列
let b = [];
let percent = a.length === 0 ? 100 : (Math.floor(100 / a.length * 100) / 100);
a.map((val, index) => {
b.push(h("p", {
class: a.length !== index + 1 ? "has-border" : "",
style: {
width: `${percent}%`,
padding:'4px 8px',
'display': 'flex',
'align-items': 'center',
'justify-content': 'center'
}}, val)
)
})
let header = h('div',{
class: 'custom-header'
}, b);
return header;
}
还需添加css样式
.ivu-table-cell{
padding: 0 !important;
width: 100%;
}
.ivu-table-cell .has-border{
position: relative;
}
.ivu-table-cell .has-border::after{
content: '';
position: absolute;
width: 1px;
background-color: #e8eaec;
top: 0;
bottom: 0;
right: 0;
}
.custom-header{
width: 100%;
height: 100%;
display: flex;
}
需要注意的是 iview 里面的 ivu-table-cell class样式 没添加height：100%。但是由于自定义列的时候，右边框的高度要100%，所以只能根据子元素手动改父节点 ivu-table-cell，添加样式。
在初始化，和改变表格数据的时候都需执行一次
changeCustomHeight(){
let customArr = document.getElementsByClassName('custom-header'); //custom-header render函数里面自定义的class
for(let i in customArr){
if(customArr[i].parentNode){
customArr[i].parentNode.style.height = "100%";
}
}
},
页面效果预览：
说明：此方法主要还是通过改变样式来实现效果，对于一些特殊的比较复杂的合并行列，可能无法实现。