第一部分：基本用法

表格的行/列合并

<!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"><tbodyv-for="(item, index) in summaryList[0]":key="index"><tr><td :rowspan="item.datas.length + 1">{{ item.ssxzqmc }}</td></tr><trv-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_modulessummaryList: [ //水质情况数组{"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":"轻度富营养"//全年水质类别}]}]

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

Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
HTML table表单colspan和rowspan行列使用方法
HTML中的table表单元素colspan和rowspan表示表格跨行或者跨列,colspan和rowspan用于将行或者列合并,码笔记分享 table表单colspan和rowspan详细用法: ...
数字时代下表单产品设计中的数据研究
导语:伴随着各行各业和人们生产生活中出现的数据化转型趋势,数据设计显得愈发重要.这篇文章主要讨论了数据的概念.分类,以及数据与指标的关系,在表单产品中数据设计的注意事项.推荐对表单设计感兴趣的同学阅读 ...
关于表单form元素中onsubmit事件处理机制的认识
博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件 ...
原生JS 表单提交验证器
一.前言最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过"缜密"的讨论后,我们决定不用外部流行的框架,如bootstrap,由于我负责的模块仅仅是其中的一部分, ...
form表单、控制器中接收表单提交数据的4种方式
Form表单这篇文章主要讲的是form表单的提交之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...
表单和ajax中的post请求后台获取数据方法（深度好文）
最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前台主要的contenttype为下面三种:(需要注意的是请求头中data ...
python flask 表单提交_python中flask应用（表单处理）
本篇文章给大家带来的内容是关于python中flask应用(表单处理),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.为什么使用Flask-WTF? request对象公开了所有 ...
HTML5表单：工具箱中的可靠工具
我们已经对页面的大部分进行了编码,现在您几乎了解了有关新HTML5元素及其语义的所有知识.但是,在我们开始在网站外观上进行工作(我们将在第7章中进行操作)之前,我们将快速绕过HTML5 Herald的 ...

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

第一部分：基本用法

表格的行/列合并

第二部分：遍历合并行

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

最新文章

热门文章