写在开头：本次项目采用的是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个表单，需要同时验证，主要代码如下：

  1. <template>
  2.     <div class="hello">
  3.         <Form ref="formValidate1" :model="formValidate1" :rules="ruleValidate">
  4.             <FormItem label="Name" prop="name">
  5.                 <Input v-model="formValidate1.name" placeholder="Enter your name"></Input>
  6.             </FormItem>
  7.         </Form>
  8.         <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate">
  9.             <FormItem label="Name" prop="name">
  10.                 <Input v-model="formValidate2.name" placeholder="Enter your name"></Input>
  11.             </FormItem>
  12.         </Form>
  13.         <Form ref="formValidate3" :model="formValidate3" :rules="ruleValidate">
  14.             <FormItem label="Name" prop="name">
  15.                 <Input v-model="formValidate3.name" placeholder="Enter your name"></Input>
  16.             </FormItem>
  17.         </Form>
  18.         <Button @click="submit">提交</Button>
  19.     </div>
  20. </template>
  21.  
  22. <script>
  23.     export default {
  24.         name: 'HelloWorld',
  25.         data() {
  26.             return {
  27.                 formValidate1: {
  28.                     name: ''
  29.                 },
  30.                 formValidate2: {
  31.                     name: ''
  32.                 },
  33.                 formValidate3: {
  34.                     name: ''
  35.                 },
  36.                 ruleValidate: {
  37.                     name: [
  38.                         { required: true, message: 'The name cannot be empty', trigger: 'blur' }
  39.                     ]
  40.                 },
  41.                 arr: []
  42.             }
  43.         },
  44.         methods: {
  45.             check(name){  // 验证表单是否通过
  46.                 this.$refs[name].validate((valid) => {
  47.                     if(valid) {
  48.                         this.arr.push(true);  // arr 这个数组是用来存放单个表单的验证状态
  49.                     } else {
  50.                         this.arr.push(false);
  51.                     }
  52.                 })
  53.             },
  54.             submit(){  // 提交
  55.                 this.arr = [];  // 重置数组
  56.                 // 同时验证多个表单
  57.                 this.check('formValidate1');
  58.                 this.check('formValidate2');
  59.                 this.check('formValidate3');
  60.                 var flag = null;
  61.                 for(var i = 0; i < this.arr.length; i++) {
  62.                     if(this.arr[i]) { // 单个表单验证通过，继续验证下个表单
  63.                         flag = true;
  64.                         continue;
  65.                     } else { // 单个表单验证不通过，结束
  66.                         flag = false;
  67.                         break;
  68.                     }
  69.                 }
  70.                 if(flag){  // 验证表单成功
  71.                     alert("验证成功");
  72.                 }else{
  73.                     alert("验证失败")
  74.                 }
  75.             }
  76.         }
  77.     }
  78. </script>
  79.  
  80. <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 开关

  1.                     {
  2.                         title: "可控开关",
  3.                         key: "isOpen",
  4.                         align: "center",
  5.                         width: 100,
  6.                         render:(h, params) => {
  7.                             return h('i-switch', {
  8.                                 props: {
  9.                                     value: params.row.isOpen ? params.row.isOpen : false,  // 指定当前是否选中  Boolean类型  (isOpen后端返回字段，根据自己接口返回数据，自行修改)
  10.                                 },
  11.                                 scopedSlots:{
  12.                                     open: () => h('span', 'on'),  // 自定义显示打开时的内容
  13.                                     close: () => h('span', 'off')  // 自定义显示关闭时的内容
  14.                                 },
  15.                                 on: {
  16.                                     /*
  17.                                      * 触发事件是on-change
  18.                                      * 参数value是回调值  Boolean类型
  19.                                     */
  20.                                     'on-change': (value) => {
  21.                                         this.data[params.index].isOpen = value;  // 赋值  data：表格数据
  22.                                     }
  23.                                 }
  24.                             })
  25.                         }
  26.                     }

b、Button按钮

  1.                     {
  2.                         title: '操作',
  3.                         key: 'action',
  4.                         width: 150,
  5.                         align: 'center',
  6.                         render: (h, params) => {  // 按钮操作
  7.                             return h('div', [
  8.                                 h('Button', {
  9.                                     props: {
  10.                                         type: 'primary',
  11.                                         size: 'small'
  12.                                     },
  13.                                     style: {  // 自定义样式
  14.                                         marginRight: '5px'
  15.                                     },
  16.                                     on: {  // 自定义事件
  17.                                         click: () => {
  18.                                             this.show(params.index)  // params.index是拿到table的行序列，可以取到对应的表格值
  19.                                         }
  20.                                     }
  21.                                 }, '查看'),
  22.                                 h('Button', {
  23.                                     props: {
  24.                                         type: 'error',
  25.                                         size: 'small'
  26.                                     },
  27.                                     on: {
  28.                                         click: () => {
  29.                                             this.remove(params.index)
  30.                                         }
  31.                                     }
  32.                                 }, '删除')
  33.                             ]);
  34.                         }
  35.                     }

c、Input 输入框

  1.                     {
  2.                         title: "input输入框",
  3.                         key: "inputText",
  4.                         align: "center",
  5.                         render:(h, params) => {
  6.                             return h('Input', {
  7.                                 props: {
  8.                                     value: params.row.inputText ? params.row.inputText : '',
  9.                                     size: 'small'
  10.                                 },
  11.                                 on: {
  12.                                     'on-blur': (event) => {  // 输入框失去焦点时触发
  13.                                         this.data[params.index].inputText = event.target.value;  // 赋值   data：表格数据
  14.                                     }
  15.                                 }
  16.                             });
  17.                         }
  18.                     }

d、Select 下拉框

  1.                     {
  2.                         title: 'select下拉框',
  3.                         key: 'selectText',
  4.                         align: 'center',
  5.                         render: (h, params) => {
  6.                             return h('Select',{
  7.                                     props:{
  8.                                         value: params.row.selectText ? params.row.selectText : '',
  9.                                         size: 'small'
  10.                                     },
  11.                                     on: {
  12.                                         'on-change':(value) => {  //  下拉框选定的值
  13.                                             this.data[params.index].selectText = value;
  14.                                         }
  15.                                     }
  16.                                 },
  17.                                 /**
  18.                                  * this.selectAction   下拉框Option数组
  19.                                  * selectAction:[
  20.                                         {
  21.                                             value: '01',
  22.                                             name:'select_1'
  23.                                         },
  24.                                         {
  25.                                             value: '02',
  26.                                             name:'select_2'
  27.                                         }
  28.                                     ]
  29.                                  */
  30.                                 this.selectAction.map((item) =>{  // 下拉选项
  31.                                     return h('Option', {
  32.                                         props: {
  33.                                             value: item.value,
  34.                                             label: item.name
  35.                                         }
  36.                                     })
  37.                                 })
  38.                             )
  39.                         }
  40.                     }

e、Rate评分

  1.                     {
  2.                         title: "评分",
  3.                         key: "rate",
  4.                         align: "center",
  5.                         render:(h, params) => {
  6.                             return h('Rate', {
  7.                                 props: {
  8.                                     value: Number(params.row.rate),  // 当前 star 数   Number类型
  9.                                     'allow-half': true,  // 可以选中半星
  10.                                     disabled: false  // 是否只读
  11.                                 },
  12.                                 on: {
  13.                                     'on-change': (value) => {   // 评分改变时触发
  14.                                         this.data[params.index].rate = value;  // 赋值  data：表格数据
  15.                                     }
  16.                                 }
  17.                             })
  18.                         }
  19.                     }

f、Img图片

  1.                   {
  2.                         title: "头像",
  3.                         key: "avatar",
  4.                         align: "center",
  5.                         width: 100,
  6.                         render:(h, params) => {
  7.                             return h('Avatar', {  // 也可用原生img标签代替
  8.                                 style: {
  9.                                     width: '30px',
  10.                                     height: '30px',
  11.                                     'border-radius': '50%'
  12.                                 },
  13.                                 attrs: {
  14.                                     src: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
  15.                                 }
  16.                             })
  17.                         }
  18.                     }

g、DatePicker时间选择器

  1.                     {
  2.                         title: "时间选择器",
  3.                         key: "date",
  4.                         align: "center",
  5.                         render:(h, params) => {
  6.                             return h('DatePicker', {
  7.                                 props: {
  8.                                     value: params.row.date,
  9.                                     size: 'small',
  10.                                     type: 'datetime'
  11.                                 },
  12.                                 on: {
  13.                                     'on-change': (value) => {  // 输入框失去焦点时触发
  14.                                         this.data[params.index].date = value;  // 赋值   data：表格数据
  15.                                     }
  16.                                 }
  17.                             });
  18.                         }
  19.                     }

h、对数据进行处理

比如，后端返回时间是时间戳格式，展示给用户看的肯定不能是时间戳，这时候就需要我们对数据进行处理

  1.                    {
  2.                         title: "申请年份",
  3.                         align: "center",
  4.                         key: "applyDate",
  5.                         render: (h, params) => {
  6.                             return h('span', {
  7.  
  8.                             }, new Date(params.row.applyDate).getFullYear())  // 对后端返回的时间戳进行处理，返回页面需要展示的格式
  9.                         }
  10.                     }

差不多就总结了这几个，写多了就发现，是一样的模板，直接套到render函数里面就是了。想要更多的学习render函数相关的，可以自己前往官网学习。

完整代码：

  1. <template>
  2.     <div class="hello">
  3.         <Table border :columns="columns" :data="data"></Table>
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8.     export default {
  9.         name: 'HelloWorld',
  10.         data() {
  11.             return {
  12.                 columns: [  // 表格列的配置描述
  13.                     {
  14.                         title: "头像",
  15.                         key: "avatar",
  16.                         align: "center",
  17.                         width: 100,
  18.                         render:(h, params) => {
  19.                             return h('Avatar', {  // 也可用原生img标签代替
  20.                                 style: {
  21.                                     width: '30px',
  22.                                     height: '30px',
  23.                                     'border-radius': '50%'
  24.                                 },
  25.                                 attrs: {
  26.                                     src: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
  27.                                 }
  28.                             })
  29.                         }
  30.                     },
  31.                     {
  32.                         title: "时间选择器",
  33.                         key: "date",
  34.                         align: "center",
  35.                         render:(h, params) => {
  36.                             return h('DatePicker', {
  37.                                 props: {
  38.                                     value: params.row.date,
  39.                                     size: 'small',
  40.                                     type: 'datetime'
  41.                                 },
  42.                                 on: {
  43.                                     'on-change': (value) => {  // 输入框失去焦点时触发
  44.                                         this.data[params.index].date = value;  // 赋值   data：表格数据
  45.                                     }
  46.                                 }
  47.                             });
  48.                         }
  49.                     },
  50.                     {
  51.                         title: "input输入框",
  52.                         key: "inputText",
  53.                         align: "center",
  54.                         render:(h, params) => {
  55.                             return h('Input', {
  56.                                 props: {
  57.                                     value: params.row.inputText ? params.row.inputText : '',
  58.                                     size: 'small'
  59.                                 },
  60.                                 on: {
  61.                                     'on-blur': (event) => {  // 输入框失去焦点时触发
  62.                                         this.data[params.index].inputText = event.target.value;  // 赋值   data：表格数据
  63.                                     }
  64.                                 }
  65.                             });
  66.                         }
  67.                     },
  68.                     {
  69.                         title: 'select下拉框',
  70.                         key: 'selectText',
  71.                         align: 'center',
  72.                         render: (h, params) => {
  73.                             return h('Select',{
  74.                                     props:{
  75.                                         value: params.row.selectText ? params.row.selectText : '',
  76.                                         size: 'small'
  77.                                     },
  78.                                     on: {
  79.                                         'on-change':(value) => {  //  下拉框选定的值
  80.                                             this.data[params.index].selectText = value;
  81.                                         }
  82.                                     }
  83.                                 },
  84.                                 /**
  85.                                  * this.selectAction   下拉框Option数组
  86.                                  * selectAction:[
  87.                                         {
  88.                                             value: '01',
  89.                                             name:'select_1'
  90.                                         },
  91.                                         {
  92.                                             value: '02',
  93.                                             name:'select_2'
  94.                                         }
  95.                                     ]
  96.                                  */
  97.                                 this.selectAction.map((item) =>{  // 下拉选项
  98.                                     return h('Option', {
  99.                                         props: {
  100.                                             value: item.value,
  101.                                             label: item.name
  102.                                         }
  103.                                     })
  104.                                 })
  105.                             )
  106.                         }
  107.                     },
  108.                     {
  109.                         title: "申请年份",
  110.                         align: "center",
  111.                         key: "applyDate",
  112.                         render: (h, params) => {
  113.                             return h('span', {
  114.  
  115.                             }, new Date(params.row.applyDate).getFullYear())  // 对后端返回的时间戳进行处理，返回页面需要展示的格式
  116.                         }
  117.                     },
  118.                     {
  119.                         title: "可控开关",
  120.                         key: "isOpen",
  121.                         align: "center",
  122.                         width: 100,
  123.                         render:(h, params) => {
  124.                             return h('i-switch', {
  125.                                 props: {
  126.                                     value: params.row.isOpen ? params.row.isOpen : false,  // 指定当前是否选中  Boolean类型  (isOpen后端返回字段，根据自己接口返回数据，自行修改)
  127.                                 },
  128.                                 scopedSlots:{
  129.                                     open: () => h('span', 'on'),  // 自定义显示打开时的内容
  130.                                     close: () => h('span', 'off')  // 自定义显示关闭时的内容
  131.                                 },
  132.                                 on: {
  133.                                     /*
  134.                                      * 触发事件是on-change
  135.                                      * 参数value是回调值  Boolean类型
  136.                                     */
  137.                                     'on-change': (value) => {
  138.                                         this.data[params.index].isOpen = value;  // 赋值  data：表格数据
  139.                                     }
  140.                                 }
  141.                             })
  142.                         }
  143.                     },
  144.                     {
  145.                         title: "评分",
  146.                         key: "rate",
  147.                         align: "center",
  148.                         render:(h, params) => {
  149.                             return h('Rate', {
  150.                                 props: {
  151.                                     value: Number(params.row.rate),  // 当前 star 数   Number类型
  152.                                     'allow-half': true,  // 可以选中半星
  153.                                     disabled: false  // 是否只读
  154.                                 },
  155.                                 on: {
  156.                                     'on-change': (value) => {   // 评分改变时触发
  157.                                         this.data[params.index].rate = value;  // 赋值  data：表格数据
  158.                                     }
  159.                                 }
  160.                             })
  161.                         }
  162.                     },
  163.                     {
  164.                         title: '操作',
  165.                         key: 'action',
  166.                         width: 150,
  167.                         align: 'center',
  168.                         render: (h, params) => {  // 按钮操作
  169.                             return h('div', [
  170.                                 h('Button', {
  171.                                     props: {
  172.                                         type: 'primary',
  173.                                         size: 'small'
  174.                                     },
  175.                                     style: {  // 自定义样式
  176.                                         marginRight: '5px'
  177.                                     },
  178.                                     on: {  // 自定义事件
  179.                                         click: () => {
  180.                                             this.show(params.index)  // params.index是拿到table的行序列，可以取到对应的表格值
  181.                                         }
  182.                                     }
  183.                                 }, '查看'),
  184.                                 h('Button', {
  185.                                     props: {
  186.                                         type: 'error',
  187.                                         size: 'small'
  188.                                     },
  189.                                     on: {
  190.                                         click: () => {
  191.                                             this.remove(params.index)
  192.                                         }
  193.                                     }
  194.                                 }, '删除')
  195.                             ]);
  196.                         }
  197.                     }
  198.                 ],
  199.                 data: [  // 表格数据
  200.                     {
  201.                         inputText: '18',
  202.                         isOpen: false,
  203.                         selectText : '02',
  204.                         rate: 4,
  205.                         date: '2019-02-03 00:08:45',
  206.                         applyDate: 1551835636920
  207.                     },
  208.                     {
  209.                         inputText: '',
  210.                         isOpen: true,
  211.                         selectText : '01',
  212.                         rate: 1.5,
  213.                         date: '',
  214.                         applyDate: 1506124800000
  215.                     }
  216.                 ],
  217.                 selectAction:[
  218.                     {
  219.                         value: '01',
  220.                         name:'select_1'
  221.                     },
  222.                     {
  223.                         value: '02',
  224.                         name:'select_2'
  225.                     }
  226.                 ]
  227.  
  228.             }
  229.         },
  230.         methods: {
  231.             show (index) {  // 查看
  232.                 this.$Modal.info({
  233.                     title: '查看',
  234.                     content: '查看详情'
  235.                 })
  236.             },
  237.             remove (index) {  // 删除
  238.                 this.data.splice(index, 1);
  239.             }
  240.         }
  241.     }
  242. </script>
  243.  
  244. <!-- Add "scoped" attribute to limit CSS to this component only -->
  245. <style scoped>
  246.     .hello{
  247.         width: 90%;
  248.         margin: 0 auto;
  249.         padding: 20px 50px 0;
  250.     }
  251. </style>

（2）selection的多选来做单选：

通过给 columns 数据设置一项，指定 type: 'selection'，即可自动开启多选功能，但是有些产品觉得iview的单选效果不好，非要用selection的来做单选。以下是解决方案：

  1.                      {
  2.                         title: '选择',
  3.                         align:'center',
  4.                         key: 'checkBox',
  5.                         width: 80,
  6.                         render:(h,params)=>{
  7.                             return h('div',[
  8.                                 h('Checkbox',{
  9.                                     props:{
  10.                                         value: params.row.checkBox
  11.                                     },
  12.                                     on:{
  13.                                         'on-change':(e)=>{
  14.                                             this.data.forEach((item)=>{ // 先取消所有对象的勾选，checkBox设置为false
  15.                                                 this.$set(item, 'checkBox', false);
  16.                                             });
  17.                                             this.data[params.index].checkBox = e;  // 再将勾选的对象的checkBox设置为true
  18.                                         }
  19.                                     }
  20.                                 })
  21.                             ])
  22.                         }
  23.                     }

（3）结合Page分页组件一起使用

一般来讲，在表格数据比较多的情况下，会对表格进行分页展示

  1. <Table border :columns="columns" :data="data"></Table>
  2. <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种：前端分页、后端分页。前端分页就是前端一次性拿到所有数据，再对拿到的数据进行分页展示。后端分页就是前端一次只拿一页的数据展示，分页的时候再次请求后端。

  1.         mounted(){
  2.             this.changeTableData();
  3.         },
  4.         methods: {
  5.             changePage(current){  // 页码改变的回调，返回改变后的页码
  6.                 this.page.current = current;
  7.                 this.changeTableData();
  8.             },
  9.             changePageSize(size){  // 切换每页条数时的回调，返回切换后的每页条数
  10.                 this.page.current = 1;
  11.                 this.page.size = size;
  12.                 this.changeTableData();
  13.             },
  14.             changeTableData(){
  15.                 /**
  16.                  * page定义
  17.                  * page: {
  18.                         total: 0, 总数
  19.                         current: 1, // 当前页码
  20.                         size: 10  // 每页个数
  21.                     }
  22.                  *
  23.                  *
  24.                  * data: 表格展示数据
  25.                  * tableData： 后端返回的所有数据
  26.                  *
  27.                  */
  28.  
  29.                 // 前端分页
  30.                 let _start, _end;
  31.                 let page = this.page;
  32.                 _start = (page.current - 1) * page.size;
  33.                 _end = page.current * page.size;
  34.                 this.data = this.tableData.slice(_start, _end);
  35.                 page.total = this.tableData.length;
  36.  
  37.                 // 后端分页
  38.                 // ajax请求后端接口，重新获取数据
  39.             }
  40.         }

使用了type=index，分页之后，索引还是从1开始，如何实现累加呢？

使用render函数可解决：

  1.                   {
  2.                         title: '序号',
  3.                         align:'center',
  4.                         type: 'index2',
  5.                         width: 80,
  6.                         render: (h, params) => {
  7.                             return h('span', params.index + (this.page.current - 1) * this.page.size + 1);
  8.                         }
  9.                     }

在翻页之后，如何记住checkbox多选的选中和未选中状态？

用一个数组checkData来装选中的数据，在每次表格数据改变时，通过比对数据来进行回填选中状态。

  1. <Table border :columns="columns" :data="data" @on-select="changeSelect" @on-select-cancel="changeSelectCancel" @on-select-all="changeSelectAll" @on-select-all-cancel="changeSelectAllCancel"></Table>
  1.          methods: {
  2.             changeSelect(data, val){  // 选中某个数据
  3.                 /**
  4.                  * checkData  多选框选中的数组
  5.                  * id  每条数据的唯一标识
  6.                  */
  7.                 for(let i in this.checkData){
  8.                     if(val.id === this.checkData[i].id){
  9.                         this.checkData.splice(i, 1);
  10.                         break;
  11.                     }
  12.                 }
  13.                 this.checkData.push(val);
  14.             },
  15.             changeSelectCancel(data, val){  // 取消某个数据
  16.                 for(let i in this.checkData){
  17.                     if(val.id === this.checkData[i].id){
  18.                         this.checkData.splice(i, 1);
  19.                         break;
  20.                     }
  21.                 }
  22.             },
  23.             changeSelectAll(data){  // 多选选中
  24.                 let arr = [];
  25.                 for(let i in data){
  26.                     let flag = true;
  27.                     for(let y in this.checkData){
  28.                         if(data[i].id === this.checkData[y].id){ // 已有数据
  29.                             flag = false;
  30.                             break;
  31.                         }else{
  32.                             continue;
  33.                         }
  34.                     }
  35.                     if(flag){  // 添加新数据
  36.                         arr.push(data[i]);
  37.                     }
  38.                 }
  39.                 this.checkData = this.checkData.concat(arr);
  40.             },
  41.             changeSelectAllCancel(data){  // 多选取消
  42.                 for(let i in this.data){ // 取消当前页的内容
  43.                     for(let y in this.checkData){
  44.                         if(this.data[i].id === this.checkData[y].id){
  45.                             this.checkData.splice(y, 1);
  46.                             break;
  47.                         }
  48.                     }
  49.                 }
  50.             },
  51.         },
  52.         watch:{
  53.             'data':{
  54.                 handler:function(newValue, oldValue){
  55.                     this.data = newValue;
  56.                     for(let i in this.data){
  57.                         let flag = false;
  58.                         for(let y in this.checkData){
  59.                             if(this.data[i].id === this.checkData[y].id){
  60.                                 flag = true;
  61.                                 break;
  62.                             }else{
  63.                                 continue;
  64.                             }
  65.                         }
  66.                         if(flag){  // 回填选中状态
  67.                             this.data[i]._checked = true;
  68.                         }else{
  69.                             this.data[i]._checked = false;
  70.                         }
  71.                     }
  72.                 },
  73.                 deep:true
  74.             }
  75.         }

5、定制iview主题

按照官网，一步一步做的，最后却报错：

那是因为less的版本过高，重新卸载，安装3.0以下的版本(比如2.7.3版本)，即可解决问题。

六、合并表格单元行

官网已经提供了表头分组的api。可是我们想合并单元行列怎么办呢，虽然官网没提供api，但是好在我们可以用render函数自定义渲染行列。

1、合并行

  1.                    {
  2.                         title: '合并行',
  3.                         align:'center',
  4.                         key: 'content',
  5.                         render: (h, params) => {
  6.                             let a = ['数学','语文']; 
  1.                             return this.renderData(h, a);
  2.                        }
  3.                     }
  4.  
  5.             // 下面为渲染方法
  6.             renderData(h, a){
  7.                 let b = [];
  8.                 a.map((val, index) => {
  9.                     b.push(h("p", {
  10.                         style: {
  11.                             height: "40px",
  12.                             lineHeight: "40px",
  13.                             "width": "100%",
  14.                             "display": "block",
  15.                             "padding": "0 10px",
  16.                             borderBottom: a.length !== index + 1 ? "1px solid #e8eaec" : "none"
  17.                         }}, val)
  18.                     )
  19.                 })
  20.                 return b;
  21.             }

2、合并列

  1.                   {
  2.                         title: '姓名,昵称',
  3.                         align:'center',
  4.                         key: 'name',
  5.                         renderHeader: (h, params) => {  // 自定义表头
  6.                             let a = ['姓名', '昵称'];
  7.                             return this.renderColumnData(h, a);
  8.                         },
  9.                         render: (h, params) => {
  10.                             let a = ['张三', '李四'];
  11.                             if(params.row.same){  // 名字姓名相同
  12.                                 a = ['王二麻子'];
  13.                             }
  14.                             return this.renderColumnData(h, a);
  15.                        }
  16.                     },
  17.  
  18.              // 下面为渲染的方法
  19.              renderColumnData(h, a){  // 渲染合并列
  20.                 let b = [];
  21.                 let percent = a.length === 0 ? 100 : (Math.floor(100 / a.length * 100) / 100);
  22.                 a.map((val, index) => {
  23.                     b.push(h("p", {
  24.                         class: a.length !== index + 1 ? "has-border" : "",
  25.                         style: {
  26.                             width: `${percent}%`,
  27.                             padding:'4px 8px',
  28.                             'display': 'flex',
  29.                             'align-items': 'center',
  30.                             'justify-content': 'center'
  31.                         }}, val)
  32.                     )
  33.                 })
  34.                 let header = h('div',{
  35.                     class: 'custom-header'
  36.                 }, b);
  37.                 return header;
  38.             }

还需添加css样式

  1.    .ivu-table-cell{
  2.         padding: 0 !important;
  3.         width: 100%;
  4.     }
  5.     .ivu-table-cell .has-border{
  6.         position: relative;
  7.     }
  8.     .ivu-table-cell .has-border::after{
  9.         content: '';
  10.         position: absolute;
  11.         width: 1px;
  12.         background-color: #e8eaec;
  13.         top: 0;
  14.         bottom: 0;
  15.         right: 0;
  16.     }
  17.     .custom-header{
  18.         width: 100%;
  19.         height: 100%;
  20.         display: flex;
  21.     }

需要注意的是  iview 里面的 ivu-table-cell  class样式  没添加height：100%。但是由于自定义列的时候，右边框的高度要100%，所以只能根据子元素手动改父节点 ivu-table-cell，添加样式。

在初始化，和改变表格数据的时候都需执行一次

  1.            changeCustomHeight(){
  2.                 let customArr = document.getElementsByClassName('custom-header');  //custom-header   render函数里面自定义的class
  3.                 for(let i in customArr){
  4.                     if(customArr[i].parentNode){
  5.                         customArr[i].parentNode.style.height = "100%";
  6.                     }
  7.                 }
  8.             },

页面效果预览：

说明：此方法主要还是通过改变样式来实现效果，对于一些特殊的比较复杂的合并行列，可能无法实现。

 

记一次开发过程中，iview遇到的一些坑以及解决办法的更多相关文章

  1. 记一次python + selenium小项目出现的问题与解决办法

    记一次python + selenium小项目出现的问题与解决办法 如何接入代理 def crawl_xdaili(self):#代理 可不用 需要时 解除注释 """ ...

  2. ［转］iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  3. python matplotlib plot 数据中的中文无法正常显示的解决办法

    转发自:http://blog.csdn.net/laoyaotask/article/details/22117745?utm_source=tuicool python matplotlib pl ...

  4. eclipse中的js文件报错的解决办法

    在使用别人的项目的时候,导入到eclipse中发现js文件报错,解决办法是关闭eclipse的js校验功能. 三个步骤: 1. 右键点击项目->properties->Validation ...

  5. 配置IIS提示打开目录浏览时的问题：未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的解决办法

    错误消息: 未能从程序集“System.ServiceModel, Version=3.0.0.0”中加载类型“System.ServiceModel.Activation.HttpModule” 的 ...

  6. Spring MVC普通类或工具类中调用service报空空指针的解决办法(调用service报java.lang.NullPointerException)

    当我们在非Controller类中应用service的方法是会报空指针,如图: 这是因为Spring MVC普通类或工具类中调用service报空null的解决办法(调用service报java.la ...

  7. Android 在 Fragment 中使用 getActivity() NullPointException 的思考和解决办法

    问题: 使用 AS 在 Fragment 中调用 getActivity() 方法的时候会出现可能为空指针的提醒 使用 monkey 多次十万次测试,会出现 getActivity() NullPoi ...

  8. linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法

    linux中没有dos2UNIX或者UNIX2dos命令怎么解决办法 http://blog.csdn.net/w616589292/article/details/38274475 dos2unix ...

  9. Xamarin中VS无法连接Mac系统的解决办法

    Xamarin中VS无法连接Mac系统的解决办法 按照以下步骤排查:(1)确认Mac系统中安装Xamarin.iOS开发必备的组件,如Mono.Xamarin.iOS.(2)将Windows和Mac下 ...

随机推荐

  1. eclipse之插件添加

    在ftp.properties文件中,中文出现十六进制显示情况,如下: 解决该问题只需要在eclipse中下载一个插件即可解决, 步骤: help  ---> install new softw ...

  2. filter 拦截ajax请求

    1.filterpublic class SessonFilter implements Filter { private static Logger log = LoggerFactory.getL ...

  3. Android各大手机系统打开权限管理页面

    最近项目上比较忙,终于有空闲时间写写东西了. 相信做过Android的都知道,现在的手机系统五花八门,当我们去请求用户的权限的时候,总是会弹出是否允许的对话框. 而且用户一旦不小心点了拒绝,下次就不再 ...

  4. lintcode中等难度5道题

    1.整数转罗马数字 对任一个罗马数字可以 由12个罗马字符进行加法操作完成,且大数在左,小数在右,可以将一个数字进行拆分来求解 2.买卖股票的最佳时机 II 可将问题转换为只要相连的两天prices[ ...

  5. python3基础08（exec、bytearray使用等）

    #!/usr/bin/env python# -*- coding:utf-8 -*- str="test"print(ascii(str))a=bytearray("a ...

  6. 更新KB915597补丁后导致“您的windows副本不是正版”的解决方案

    更新KB915597补丁后导致“您的windows副本不是正版”的解决方案 解决方法: 运行cw.exe(https://pan.lanzou.com/i05ya8h),直至提示成功: 重新启动操作系 ...

  7. [VC]线程

    是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必不可少的资源,但它可与同属一个进程的其它线程共 享进程所拥有的全部资源.一个线程可以创建和撤消另一个线 ...

  8. 如何解决linux下apache启动时httpd: apr_sockaddr_info_get() failed for 报错

    今天在家里的RHLE5.5上安装apache的时候,先用user1用户./configure命令配置,然后才用root用户make && make install,结果apache起来 ...

  9. 问题007：JDK版本与JRE版本不同导致java.exe执行类文件错误 java.lang.UnsupportedClassVersionError错误

    版本不同的原因是,Windows 系统之前安装了JRE 是别的版本的 解决方法,将其卸载,卸载后可以正常使用,不再错误提示.

  10. win10搭建FTP服务器

    下面就给大家讲解Win10搭建FTP服务器的详细操作方法. 1.首先,我们在Cortana中搜索控制面板并进入: 2.在控制面板-程序中,点击启用或关闭Windows功能: 3.在FTP服务器.Web ...