关于原生table表单在vue中的遍历和合并行

最新推荐文章于 2023-12-15 13:34:05 发布

一个好好的程序员

最新推荐文章于 2023-12-15 13:34:05 发布

阅读量1.6k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_62823653/article/details/126858632

版权

第一部分：基本用法

表格的行/列合并

<!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":"轻度富营养"//全年水质类别
			}]
		}
	 ]