在Vue项目中，面临一个复杂的表格渲染需求，涉及到表头th的多行合并，且合并的列数是动态的。文章通过示例代码展示了如何使用iviewui的table组件，结合动态数据实现这一功能。尽管网上大多数教程只涉及简单的td合并，但作者通过自己的尝试和思考，成功解决了这个问题，并分享了解决方案。
吐槽
今天，在vue中遇到 复杂表格的渲染 ，需要合并表头th的单元格，且合并单元格的那列的表头数据是动态数据，也就是不知道会有多少个表头列，而这几个表头列还分了好几个子表头。
这个需求在js里用Juicer模板很好做的，思路我是有的，但就是对于vue，我也算初学者，很多概念不是很懂，这就限制了思路。
在网上搜了很多合并单元格的都是简单的数据合并，也就是td合并, 不是我们的需求，就不贴了。
哎，废话不多说了，看代码吧：
代码示例
使用iviewui的table组件：
最初，直接使用项目中的iviewui的table组件, 给 column 设置 children ，可以实现表头合并。先用写死的数据做了个样例，如下：
data()中如下:
columns: [
{
title: '序号',
width: 60,
align: 'center',
fixed: 'left',
render: (h, params) => {
return h('span', params.row._index + 1)
}
},
{
title: '姓名',
key: 'name',
align: 'center',
fixed: 'left',
width: 80
},
{
title: '学号',
key: 'code',
align: 'center',
width: 80
},
{
title: '性别',
key: 'sex',
align: 'center',
width: 80
},
{
title: '学期',
key: 'term',
align: 'center',
width: 80
},
{
title: '9月28日',
align: 'center',
children: [
{
title: '阅读',
key: 'date1_rScore',
align: 'center',
minWidth: 80,
sortable: true
},
{
title: '听力',
key: 'date1_lScore',
align: 'center',
minWidth: 80,
最低0.47元/天 解锁文章
2855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
