记一次用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拆开了，布局也没有翻车，很奈斯，总之也算是一种解决问题的方法，就酱紫！