网络编程 
首页 > 网络编程 > 浏览文章

Vue实现数据表格合并列rowspan效果

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

背景

现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩。

Vue实现数据表格合并列rowspan效果

html实现

使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下:

<table>
 <thead>
 <tr>
 <th>姓名</th>
 <th>课程数</th>
 <th>课程名称</th>
 <th>成绩</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td rowspan="3">
 张三
 </td>
 <td rowspan="3">
 3
 </td>
 <td>语文</td>
 <td>100</td>
 </tr>
 <tr>
 <td>数学</td>
 <td>90</td>
 </tr>
 <tr>
 <td>英语</td>
 <td>80</td>
 </tr>
 </tbody>
</table>

数据结构

在实际工程中,表格数据一般来自后端,以json格式发送到前端后,学生和课程是一对多的关系,json格式数据结构如下:

[
 {
 name: '张三',
 courses: [
 {
 name: '语文',
 score: '100'
 },
 {
 name: '数学',
 score: '90'
 },
 {
 name: '英语',
 score: '80'
 }
 ]
 }
]

Vue实现

我们对比表格结构和json数据结构,分析出结论如下:

1.实际上每个课程对应表格的一行
2.如果是第一列第二列(学生姓名、学生课程数),则应设置其rowspan值为该学生拥有的课程数
3.如果是第一列第二列,则每个学生只需要输出1次该列,因为需要按学生合并列后展示。

分析完1-3条后,代码实现也就简单了:

<html>

<head>
 <style>
 th {
 border: 1px solid black;
 width: 100px;
 }

 td {
 border: 1px solid black;
 }
 </style>
</head>

<body>
 <div id="app">
 <table>
 <thead>
 <th>姓名</th>
 <th>课程数</th>
 <th>课程名称</th>
 <th>成绩</th>
 </thead>
 <tbody>
 <template v-for="(item,index) in students">
  <tr v-for="(m,i) in item.courses">
  <!-- 第1列每个学生只需要展示1次 -->
  <td v-if="i==0" :rowspan="item.courses.length">
  {{item.name}}
  </td>
  <!-- 第2列每个学生只需要展示1次 -->
  <td v-if="i==0" :rowspan="item.courses.length">
  {{item.courses.length}}
  </td>
  <td>{{m.name}}</td>
  <td>{{m.score}}</td>
  </tr>
 </template>
 </tbody>
 </table>
 </div>
 <script src="/UploadFiles/2021-04-02/vue.js">

效果:

Vue实现数据表格合并列rowspan效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

上一篇:vue通过数据过滤实现表格合并
下一篇:小程序分页实践之编写可复用分页组件
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap