共计 2917 个字符，预计需要花费 8 分钟才能阅读完成。
记一次用 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 拆开了，布局也没有翻车，很奈斯，总之也算是一种解决问题的方法，就酱紫！
