vue中 表头th 合并单元格,且表格列数不定的动态渲染方法
吐槽
今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把:
代码示例
data数据是后端接口返回的,其中的数据格式是这样的:
[
{
"studentId": "ff808081651e03d4016530b937f50a33",
"studentName": "傅xx",
"studentCode": "91scdsc109",
"sex": {
"value": "MALE",
"name": "男"
},
"termName": "2018秋",
"examDates": [
"10月",
"9月28日"
],
"map": {
"9月28日": [
{
"courseName": "听力",
"scorel": 6.0
},
{
"courseName": "阅读",
"score": 7.0
},
{
"courseName": "写作",
"scorel": 5.5
}
]
},
"courseNames": [
"听力",
"阅读",
"写作",
"口语",
"总分"
]
},
{
"studentId": "ff8080816483a43d01648723c52801bc",
"studentName": "陈xx",
"studentCode": "91edfedf3",
"sex": {
"value": "FEMALE",
"name": "女"
},
"termName": "2018秋",
"examDates": [
"10月",
"9月28日"
],
"map": {
"9月28日": [
{
"courseName": "听力",
"score": 5.5,
"order": 0
},
{
"courseName": "阅读",
"score": 6.0,
"order": 1
},
{
"courseName": "写作",
"score": 5.5,
"order": 2
},
{
"courseName": "口语",
"scoreFinal": 5.5,
"order": 3
}
]
},
"courseNames": [
"听力",
"阅读",
"写作",
"口语",
"总分"
]
}
]
获取到以上数据后,对数据稍微处理下:
<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
courseNames = response.data[0].courseNames
this.studentDataList = response.data
}
)
},
initScoreFinal (examDate, course, map) {
let scoreFinal = 0
console.log('map:' + map)
for (var it in map) {
map[it].forEach((item, index, array) => {
if (it === examDate && item.courseName === course) {
scoreFinal = item.scoreFinal
}
})
}
return scoreFinal
}
}
效果如图:
再吐个槽
在网上搜了很多合并单元格的都是简单的数据合并,也就是td
合并,我们这边的项目需要的这个表格比较变态,按日期分组的去五门课程,且日期数目不定,又可能多个日期,这就很头疼了,总之长知识了,记录下来。
原文地址:https://segmentfault.com/a/1190000016895856
vue中 表头th 合并单元格,且表格列数不定的动态渲染方法的更多相关文章
- vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...
- 复杂的POI导出Excel表格(多行表头、合并单元格)
poi导出excel有两种方式: 第一种:从无到有的创建整个excel,通过HSSFWorkbook,HSSFSheet HSSFCell, 等对象一步一步的创建出工作簿,sheet,和单元格,并添加 ...
- 【转】C# DataTable 导出 Excel 进阶 多行表头、合并单元格、中文文件名乱码
本文原创地址:http://blog.csdn.net/ranbolwb/article/details/8083983 ,转载请保留本行. 本例子是上一篇 DataTable 导出 Excel 的进 ...
- poi导出Excel报表多表头双层表头、合并单元格
效果图: controller层方法: /** * * 导出Excel报表 * @param request * @return * */ @ ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- python-利用xlrd模块中读取有合并单元格的excel数据
前言 对于excel中有合并单元格的情况,合并的单元格只能取到第一个单元格的值,合并的单元格后面的单元格内容的值为空,针对这个情况,写了下面一段代码实现, 对单元格进行判断,如果是传入的索引是合并单元 ...
- 前端Excel表格导入导出,包括合并单元格,表格自定义样式等
表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现,返回一个叫W ...
- [C#]合并单元格(行、列)
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...
- el-table——可合并单元格的表格
<el-table v-loading="loading" :data="tableData" border :span-method="col ...
随机推荐
- ES5数组的方法
var ary = [1,23,4]; function isArray(o){ return Object.prototype.toString.call(o)=='[object Array]'; ...
- python 基础(九) 文件操作
文件操作 一.函数: f = open(’文件名','打开方式'[,encoding='字符编码']) open 打开的方式 字符 说明 r 只读的方式打开 rb 以二进制的形式打开文件 只读 r+ ...
- 使用PHP操作SQL 完成简单的CURD操作
1.从数据库出发,先建立测试数据,这里使用的MYSQL,通过脚本模式创建测试数据. SET NAMES UTF8; DROP DATABASE IF EXISTS disk; CREATE DATAB ...
- Maximum Control (medium) Codeforces - 958B2
https://codeforces.com/contest/958/problem/B2 题解:https://www.cnblogs.com/Cool-Angel/p/8862649.html u ...
- ubuntu dpkg命令总结
dpkg是Debian系统的后台包管理器,类似RPM.也是Debian包管理系统的中流砥柱,负责安全卸载软件包,配置,以及维护已安装的软件包.由于ubuntu和Debian乃一脉相承,所以很多命令是不 ...
- freertos之内存管理
任务.信号量.邮箱才调度器开始调度之前就应该创建,所以它不可能像裸奔程序那样的函数调用能确定需要多少内存资源,RTOS提供了3种内存管理的方法: 1 方法一:确定性好适合于任务.信号量.队列都不被删除 ...
- js 中对字符串的操作
1.split() split() 方法用于把一个字符串分割成字符串数组. 用法:stringObject.split(separator,howmany) separator:必选,类型为字符串或者 ...
- 图像分类丨ILSVRC历届冠军网络「从AlexNet到SENet」
前言 深度卷积网络极大地推进深度学习各领域的发展,ILSVRC作为最具影响力的竞赛功不可没,促使了许多经典工作.我梳理了ILSVRC分类任务的各届冠军和亚军网络,简单介绍了它们的核心思想.网络架构及其 ...
- QQ免费企业邮箱申请配置
对于小企业来说,免费的企业邮箱是不错的选择,省去服务器费用和人员维护费用.在这里说一下,qq的免费企业邮箱.如果想搭建自己的企业邮局,请参考:centos extmail postfix nginx ...
- Windows忘记mysql的密码
1.查看mysql的安装路径 show variables like "%char%"; 路径:C:\Program Files\MySQL\MySQL Server 5.7\ 2 ...