记一次用iview实现表格"合并"单元格的具体操作

记一次用iview实现表格"合并"单元格的具体操作

最近做项目使用iview框架做后台管理系统，第一次使用iview遇到过很多问题，有些小坑也都在网上找到解决方案了，可作为一个通用型框架不可能满足任凭你能想象到的功能的，但其实少了某些实际需求也未尝不是件好事，可以发挥我们作为 程序员 的想象空间，一开始总在table上下功夫，想着能不能用类似原生table一样加上rowspan就可以把改合并的合并起来，把该拆分的拆分开来，未果.....

废话少唠，直接上代码

json数据

{
    "data": [{
        "list": [{
            "time_period_name": "上午上学",
            "normal_amount": 0,
            "be_late_amount": 1,
            "leave_early_amount": 0,
            "not_attendance_amount": 0
        }, {
            "time_period_name": "下午上学",
            "normal_amount": 0,
            "be_late_amount": 0,
            "leave_early_amount": 0,
            "not_attendance_amount": 1
        }, {
            "time_period_name": "下午放学",
            "normal_amount": 0,
            "be_late_amount": 0,
            "leave_early_amount": 0,
            "not_attendance_amount": 1
        }, {
            "time_period_name": "上午放学",
            "normal_amount": 0,
            "be_late_amount": 0,
            "leave_early_amount": 1,
            "not_attendance_amount": 0
        }],
        "grade_name": "幼儿园托儿班",
        "class_name": "幼儿园托儿班2班",
        "date": "2019-02-14",
        "student_name": "刘小明"
    }],
} ]
]

组件代码

<Table :columns="columns" :data="reportList"  :loading="loading" border></Table>

data数据（重点来了）

columns:[
        {title:'年级',key:'grade_name',align:'center'},
        {title:'班级',key:'class_name',align:'center'},
        {title:'日期',key:'date',align:'center'},
        {title:'姓名',key:'student_name',align:'center'},
        {
            title: '考勤时段',
            key: 'list',
            align:'center',
            render: (h, params) => {
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.time_period_name)
                }))
              ]);
            }
        },
        {
            title: '正常',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].normal_amount!=undefined){
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.normal_amount)
                }))
              ]);
              }else{
                return h('div', [
                  h('span', '----'),
                ])
              }
            }
        },
        {
            title: '迟到',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].be_late_amount!=undefined){
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.be_late_amount)
                }))
              ]);
            }else{
              return h('div', [
                h('span', '----'),
              ])
            }
          }
        },
        {
            title: '早退',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].leave_early_amount!=undefined){
                  return h('div', {
                    attrs: {
                        class:'subCol'
                    },
                  }, [
                  h('ul', this.reportList[params.index].list.map(item => {
                      return h('li', {
                      }, item.leave_early_amount)
                  }))
                ]);
              }else{
                return h('div', [
                  h('span', '----'),
                ])
              }
            }
        },
        {
            title: '未考勤',
            key: 'list',
            align:'center',
            render: (h, params) => {
              if(this.reportList[params.index].list[0].not_attendance_amount!=undefined){
                return h('div', {
                  attrs: {
                      class:'subCol'
                  },
                }, [
                h('ul', this.reportList[params.index].list.map(item => {
                    return h('li', {
                    }, item.not_attendance_amount)
                }))
              ]);
              }else{
                return h('div', [
                  h('span', '----'),
                ])
              }
            }
        },
      ],

再配合css样式哈

.subCol>ul>li{
      margin:0 -18px;
      list-style:none;
      text-Align: center;
      padding: 9px;
      border-bottom:1px solid #ccc;
      overflow-x: hidden;
}
.subCol>ul>li:last-child{
  border-bottom: none
}

实现效果

代码完毕！！！！

代码不是很好看哈，相信看完的看官已经发现了，这根本不是什么合并单元格的操作嘛，emmmmmmmmmmm，其实整理这篇笔记的目的不在于花哨的展示自己浅薄的技能，只是就开发过程中遇到的一些坎儿和解决方法分享出来，起初自己一直在“合并”和“拆分”表格上下功夫，结果就是纠缠许久也没有实现想要的效果，最后灵机一动qtnn的td和tr，于是乎tr就被div拆开了，布局也没有翻车，很奈斯，总之也算是一种解决问题的方法，就酱紫！