吐槽

今天,在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 合并单元格,且表格列数不定的动态渲染方法的更多相关文章

  1. vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

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

  2. 复杂的POI导出Excel表格(多行表头、合并单元格)

    poi导出excel有两种方式: 第一种:从无到有的创建整个excel,通过HSSFWorkbook,HSSFSheet HSSFCell, 等对象一步一步的创建出工作簿,sheet,和单元格,并添加 ...

  3. 【转】C# DataTable 导出 Excel 进阶 多行表头、合并单元格、中文文件名乱码

    本文原创地址:http://blog.csdn.net/ranbolwb/article/details/8083983 ,转载请保留本行. 本例子是上一篇 DataTable 导出 Excel 的进 ...

  4. poi导出Excel报表多表头双层表头、合并单元格

    效果图: controller层方法: /**     *      * 导出Excel报表     * @param request     * @return     *      */    @ ...

  5. 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  6. python-利用xlrd模块中读取有合并单元格的excel数据

    前言 对于excel中有合并单元格的情况,合并的单元格只能取到第一个单元格的值,合并的单元格后面的单元格内容的值为空,针对这个情况,写了下面一段代码实现, 对单元格进行判断,如果是传入的索引是合并单元 ...

  7. 前端Excel表格导入导出,包括合并单元格,表格自定义样式等

    表格数据导入 读取导入Excel表格数据这里采用的是 xlsx 插件 npm i xlsx 读取excel需要通过 XLSX.read(data, {type: type}) 方法来实现,返回一个叫W ...

  8. [C#]合并单元格(行、列)

    详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak説明:控件ID指的是页面上面的Grid ...

  9. el-table——可合并单元格的表格

    <el-table v-loading="loading" :data="tableData" border :span-method="col ...

随机推荐

  1. ES5数组的方法

    var ary = [1,23,4]; function isArray(o){ return Object.prototype.toString.call(o)=='[object Array]'; ...

  2. python 基础(九) 文件操作

    文件操作 一.函数: f = open(’文件名','打开方式'[,encoding='字符编码']) open 打开的方式 字符 说明 r 只读的方式打开 rb 以二进制的形式打开文件 只读 r+ ...

  3. 使用PHP操作SQL 完成简单的CURD操作

    1.从数据库出发,先建立测试数据,这里使用的MYSQL,通过脚本模式创建测试数据. SET NAMES UTF8; DROP DATABASE IF EXISTS disk; CREATE DATAB ...

  4. Maximum Control (medium) Codeforces - 958B2

    https://codeforces.com/contest/958/problem/B2 题解:https://www.cnblogs.com/Cool-Angel/p/8862649.html u ...

  5. ubuntu dpkg命令总结

    dpkg是Debian系统的后台包管理器,类似RPM.也是Debian包管理系统的中流砥柱,负责安全卸载软件包,配置,以及维护已安装的软件包.由于ubuntu和Debian乃一脉相承,所以很多命令是不 ...

  6. freertos之内存管理

    任务.信号量.邮箱才调度器开始调度之前就应该创建,所以它不可能像裸奔程序那样的函数调用能确定需要多少内存资源,RTOS提供了3种内存管理的方法: 1 方法一:确定性好适合于任务.信号量.队列都不被删除 ...

  7. js 中对字符串的操作

    1.split() split() 方法用于把一个字符串分割成字符串数组. 用法:stringObject.split(separator,howmany) separator:必选,类型为字符串或者 ...

  8. 图像分类丨ILSVRC历届冠军网络「从AlexNet到SENet」

    前言 深度卷积网络极大地推进深度学习各领域的发展,ILSVRC作为最具影响力的竞赛功不可没,促使了许多经典工作.我梳理了ILSVRC分类任务的各届冠军和亚军网络,简单介绍了它们的核心思想.网络架构及其 ...

  9. QQ免费企业邮箱申请配置

    对于小企业来说,免费的企业邮箱是不错的选择,省去服务器费用和人员维护费用.在这里说一下,qq的免费企业邮箱.如果想搭建自己的企业邮局,请参考:centos extmail postfix nginx ...

  10. Windows忘记mysql的密码

    1.查看mysql的安装路径 show variables like "%char%"; 路径:C:\Program Files\MySQL\MySQL Server 5.7\ 2 ...