第一部分：基本用法
表格的行/列合并
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="50px">
<caption>表格的合并：合并行/列</caption>
<tr>
<td rowspan="2">合并行</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td align="center" colspan="2">合并列</td>
<td></td>
</tr>
</table>
</body>
</html>第二部分：遍历合并行
这是我要合并之后的样子
代码如下
注意点：要合并的td单独用tr拎出来<table class="gx-table3" cellpadding="0">
<tbody
v-for="(item, index) in summaryList[0]"
:key="index"
>
<tr>
<td :rowspan="item.datas.length + 1">
{
{ item.ssxzqmc }}
</td>
</tr>
<tr
v-for="(value, i) in item.datas"
:key="i"
>
<td>{
{ value.hymc }}</td>
<td>{
{ value.dwmc }}</td>
<td
:style="'backgroundColor:' + colorList(value.cjszlb)"
>
{
{ value.cjszlb }}
</td>
<td
:style="'backgroundColor:'+colorList(value.xjszlb)"
>
{
{ value.xjszlb }}
</td>
<td
:style="'backgroundColor:'+colorList(value.qjszlb)"
>
{
{ value.qjszlb }}
</td>
<td
:style="'backgroundColor:'+colorList(value.qnszlb)"
>
{
{ value.qnszlb }}
</td>
</tr>
</tbody>
</table>
后端返回数据格式
**/node_modules
summaryList: [ //水质情况数组
{
"ssxzqmc":"北海市",
"datas":[{
"hymc":"廉州湾",//海域名称
"dwmc":"GXN05001",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"未达到富营养化状态",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"铁山港",//海域名称
"dwmc":"GXN05002",//点位名称
"cjszlb":"未达到富营养化状态",//春季水质类别
"xjszlb":"未达到富营养化状态",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"银滩-竹林",//海域名称
"dwmc":"GXN05003",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"中度富营养",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"北海南部海域",//海域名称
"dwmc":"GXN05004",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"未达到富营养化状态",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
}]
},
{
"ssxzqmc":"钦州市",
"datas":[{
"hymc":"钦州湾外湾",//海域名称
"dwmc":"GXN05005",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"未达到富营养化状态",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"大风江口-三娘湾",//海域名称
"dwmc":"GXN05006",//点位名称
"cjszlb":"未达到富营养化状态",//春季水质类别
"xjszlb":"未达到富营养化状态",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"钦州港",//海域名称
"dwmc":"GXN05007",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"中度富营养",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
}]
},
{
"ssxzqmc":"防城港市",
"datas":[{
"hymc":"珍珠湾",//海域名称
"dwmc":"GXN05008",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"未达到富营养化状态",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"防城港东湾",//海域名称
"dwmc":"GXN05009",//点位名称
"cjszlb":"未达到富营养化状态",//春季水质类别
"xjszlb":"未达到富营养化状态",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"北仑河口",//海域名称
"dwmc":"GXN05010",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"中度富营养",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
},{
"hymc":"防城港湾南岸靠岸海域",//海域名称
"dwmc":"GXN05011",//点位名称
"cjszlb":"轻度富营养",//春季水质类别
"xjszlb":"中度富营养",//夏季水质类别
"qjszlb":"轻度富营养",//秋季水质类别
"qnszlb":"轻度富营养"//全年水质类别
}]
}
]