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="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 <script>
  var vm = new Vue({
   el: "#app",
   data: {
    students: [
     {
      name: '张三',
      courses: [
       {
        name: '语文',
        score: '100'
       },
       {
        name: '数学',
        score: '90'
       },
       {
        name: '英语',
        score: '80'
       }
      ]
     },
     {
      name: '李四',
      courses: [
       {
        name: '语文',
        score: '100'
       },
       {
        name: '数学',
        score: '90'
       }
      ]
     }
    ]
   }
  });
 </script>
</body>

</html>

效果：

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

赞 (0)

相关推荐

  • vue.js实现表格合并示例代码

    vue.js实现表格合并示例代码

    前言 由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的.因此这个方法对所有数据驱动的框架都有效,比如说Angular和React. 最后的实现效果是这样的: 实现思路 原本的正常表格的代码长这样: <tr v-for="item in items"> <td width="3%">{{ $index + 1 }}</td> <td

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

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

    背景 现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩. html实现 使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下: <table> <thead> <tr> <th>姓名</th> <th>课程数</th> <th>课程名称</th> <th>成绩</th> </tr> </thead> <

  • vue element实现表格合并行数据

    vue element实现表格合并行数据

    本文实例为大家分享了vue element实现表格合并行数据的具体代码,供大家参考,具体内容如下 支持不分页的表格数据,分页的表格数据还有小bug <template> <el-container> <el-main> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod" //添加这个实

  • vue使用el-table动态合并列及行

    vue使用el-table动态合并列及行

    本文实例为大家分享了vue使用el-table动态合并列及行的具体代码,供大家参考,具体内容如下 前两天项目中需要用到表单合并,特此记录,放便以后使用. 首先我使用的element-ui中的el-table,文档中提供span-method方法可以实现合并行或列,大家不熟悉的可以去看看element文档地址,但是文档提供的例子很简单,不能满足复杂的页面,所以需要处理一下数据. 如下代码: getListDataForRowAndColumn(data){ let self = this; sel

  • vue.draggable实现表格拖拽排序效果

    本文实例为大家分享了vue.draggable实现表格拖拽排序效果展示的具体代码,供大家参考,具体内容如下 主要使用vuedraggable和sortablejs两个组件. 1.安装组件 npm install vuedraggable npm install sortablejs 2.引入组件 import draggable from 'vuedraggable'; import Sortable from 'sortablejs'; export default { components:

  • vue大数据表格卡顿问题的完美解决方案

    前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续优化,谢谢 先看一下效果,一共1000 X 100 = 10W个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github (本地下载) 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最

  • SpringBoot+VUE实现数据表格的实战

    SpringBoot+VUE实现数据表格的实战

    目录 前言 使用的开发工具: 一.前端准备 1. 基础界面 2. 导入JS文件 二.后端准备 1. 创建实体类 2. Controller层 3. Service层 4. Mapper层 三.前后端整合 四.运行结果 总结 前言 还记得第一次做项目时,因为不会将数据库表中的数据渲染到前端而头疼,最后还是靠layui提供的数据表格API实现了前端数据表格的渲染.一直到现在做了很多SpringBoot项目.SSM项目之后,现在返回头来看这个曾经这个让我备受折磨的问题,脑海中下意识就会想到很多种解决的

  • vue实现表格增删改查效果的实例代码

    vue实现表格增删改查效果的实例代码

    整理文档,搜刮出一个vue实现表格增删改查效果的实例代码,稍微整理精简一下做下分享. 实现效果 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行: list: [ { username: 'aaaaa', email: '123@qq.com', sex: '男', province: '北京市', hobby: ['篮球', '读书', '编程'] }, { username: 'bbbbb', email: 'bbbbbbb@163.com', sex: '女', p

  • vue通过数据过滤实现表格合并

    vue通过数据过滤实现表格合并

    基于vue通过数据过滤实现表格合并,供大家参考,具体内容如下 需求 基于vue渲染的数据表格 需要对相同的列进行合并 思路 自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作. 要合并单元格需要用到rowspan属性,所有想法是针对数据添加rowspan属性使其多行显示,但下面的行再去渲染就重复了,所以用hidden 隐藏掉. 所以,针对每一行数据 ,用rowspan和display来控制每一个单元格的合并行数和是否显示 代码 <table id="search_tabl

  • Vue Elenent实现表格相同数据列合并

    Vue Elenent实现表格相同数据列合并

    本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下 作者:秋名 思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并.(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰.) template: <el-table :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性 > Js: da

  • vue element实现表格增加删除修改数据

    vue element实现表格增加删除修改数据

    本文实例为大家分享了vue element实现表格增加删除修改数据的具体代码,供大家参考,具体内容如下 这里用到是设置一个弹出框来实现此功能,还有一种方法是直接在原来的基础上面进行修改 效果如下: 表格的table: <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width=&q

随机推荐