table多行表头合并 vue_vue中 表头 th 合并单元格，且表格列数不定的动态渲染方法...

吐槽

今天，在vue中遇到 复杂表格的渲染 ，需要合并表头th的单元格，且合并单元格的那列的表头数据是动态数据，也就是不知道会有多少个表头列，而这几个表头列还分了好几个子表头。

这个需求在js里用Juicer模板很好做的，思路我是有的，但就是对于vue，我也算初学者，很多概念不是很懂，这就限制了思路。

在网上搜了很多合并单元格的都是简单的数据合并，也就是td合并, 不是我们的需求，就不贴了。

哎，废话不多说了，看代码吧：

代码示例

使用iviewui的table组件：

最初，直接使用项目中的iviewui的table组件, 给 column 设置 children ，可以实现表头合并。先用写死的数据做了个样例，如下：

<Table :columns="columns" :data="studentData" border></Table>

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,

sortable: true

},

{

title: '写作',

key: 'date1_wScore',

align: 'center',

minWidth: 80,

sortable: true

},

{

title: '口语',

key: 'date1_sScore',

align: 'center',

minWidth: 80,

sortable: true

},

{

title: '总分',

key: 'date1_score',

align: 'center',

minWidth: 80,

sortable: true

}

]

},

{

title: '8月10日&14日',

align: 'center',

children: [

{

title: '阅读',

key: 'date2_rScore',

align: 'center',

minWidth: 80,

sortable: true

},

{

title: '听力',

key: 'date2_lScore',

align: 'center',

minWidth: 80,

sortable: true

},

{

title: '写作',

key: 'date2_wScore',

align: 'center',

minWidth: 80,

sortable: true

},

{

title: '口语',

key: 'date2_sScore',

align: 'center',

minWidth: 80,

sortable: true

},

{

title: '总分',

key: 'date2_score',

align: 'center',

minWidth: 80,

sortable: true

}

]

},

{

title: '听力提高',

key: 'lImprove',

align: 'center',

width: 70

},

{

title: '阅读提高',

key: 'rImprove',

align: 'center',

width: 70

},

{

title: '写作提高',

key: 'writingImprove',

align: 'center',

width: 70

},

{

title: '口语提高',

key: 'sImprovem',

align: 'center',

width: 70

},

{

title: '总分提高',

key: 'srImprove',

align: 'center',

width: 70

}

],

studentData: [

{

name: 'xxx',

code: '918989070065',

sex: '男',

term: '2018秋',

date1: '9月28日',

date1_rScore: '3.5',

date1_lScore: '3.5',

date1_wScore: '5',

date1_sScore: '4',

date1_score: '4',

date2: '8月10日&14日',

date2_rScore: '3.5',

date2_lScore: '3.5',

date2_wScore: '5',

date2_sScore: '4',

date2_score: '4',

lImprove: '-0.5',

rImprove: '0',

wImprove: '1.5',

sImprove: '0.5',

srImprove: '0.5'

}

],

实现效果如图：

重点是后端给的数据格式

以下是data数据是后端接口返回的，其中的数据格式是这样的：

[

{

"studentId": "ff808b937f50a33",

"studentName": "傅xx",

"studentCode": "91scdsc109",

"sex": {

"value": "MALE",

"name": "男"

},

"termName": "2018秋",

"examDates": [

"10月",

"9月28日"

],

"map": {

"9月28日": [

{

"courseName": "听力",

"score": 6.0

},

{

"courseName": "阅读",

"score": 7.0

},

{

"courseName": "写作",

"score": 5.5

}

]

},

"courseNames": [

"听力",

"阅读",

"写作",

"口语",

"总分"

]

},

{

"studentId": "ff80c52801bc",

"studentName": "陈xx",

"studentCode": "91edfedf3",

"sex": {

"value": "FEMALE",

"name": "女"

},

"termName": "2018秋",

"examDates": [

"10月",

"9月28日"

],

"map": {

"9月28日": [

{

"courseName": "听力",

"score": 5.5

},

{

"courseName": "阅读",

"score": 6.0

},

{

"courseName": "写作",

"score": 5.5

},

{

"courseName": "口语",

"score": 5.5

}

]

},

"courseNames": [

"听力",

"阅读",

"写作",

"口语",

"总分"

]

}

]

重点是要以上述data中map里的日期为一组的表头，每组日期包含的是五门课，然后日期是根据数据库查出来的，不确定到底是几个日期，也就是table里这个日期的th是根据数据循环生成的，请仔细看这里给出的数据格式。

使用H5的table实现

template如下：

<table class="table">

<thead>

<tr>

<th rowspan="2">序号</th>

<th rowspan="2">姓名</th>

<th rowspan="2">学号</th>

<th rowspan="2">性别</th>

<th rowspan="2">学期</th>

<th colspan="5" v-for="(it,i) in examDates" :key="i">{{it}}</th>

</tr>

<tr>

<template v-for="itd in examDates">

<th v-for="(itc,j) in courseNames" :key="itd+j">{{itc}}</th>

</template>

</tr>

</thead>

<tbody>

<tr v-for="(item,index) in studentDataList" :key="index">

<td>{{index+1}}</td>

<td>{{item.studentName}}</td>

<td>{{item.studentCode}}</td>

<td>{{item.sex.name}}</td>

<td>{{item.termName}}</td>

<template v-for="examDate in examDates">

<template v-for="(course,j) in courseNames">

<td :key="examDate+j">

{{initScoreFinal(examDate,course,item.map)}}

</td>

</template>

</template>

</tr>

</tbody>

</table>

获取到上述后端返回的数据后，对数据稍微处理下：

data () {

return {

studentDataList: [],

examDates: [],

courseNames: []

},

created () {

this.getData ()

},

methods: {

//

getData () {

this.$get( //该方法是封装过的axios

'/list.json',

{

....//此处是参数，略

},

response => {

this.examDates = response.data[0].examDates

this.courseNames = response.data[0].courseNames

this.studentDataList = response.data

}

)

},

initScoreFinal (examDate, course, map) {

let final = 0

console.log('map:' + map)

for (var it in map) {

map[it].forEach((item, index, array) => {

if (it === examDate && item.courseName === course) {

final = item.score

}

})

}

return final

}

}

效果如图：

再吐个槽

在网上搜了很多合并单元格的都是简单的数据合并，也就是td合并，

我们这边的项目需要的这个表格比较变态，结合上述效果图来说吧，图中的表头是先按日期为一列th，这日期的列下分五门课程的子列th，且日期数目不定，可能是一两个日期，可能是多个日期，每个日期下对应的课程也不确定，就像学生上课，每天的课不同，但总共就那五门课，日期列的数目不定，课程数的数据不定，于是，这就很头疼了-_-||

总之长知识了，记录下来。

或许有大神能用iviewui的table组件 能做出来动态列数的表头合并，欢迎来一起谈论办法！！！