原生table合并行和列

已于 2023-11-01 15:55:35 修改
阅读量5.5k 收藏 32
点赞数 3
分类专栏： 前端杂烩 文章标签： javascript vue html js
于 2020-12-07 12:13:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37881606/article/details/110806008
版权

原生table合并行和列

代码开始前的条件：

HTML + vue2 + table
vue是直接在script标签内引用的cdnjs（只是做功能，没有太多的调整样式）

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
思路：

1、先把表头固定一下，rowspan和colspan搞起来；
2、整理数据，把同样的受理员名称合并到一起，循环判断前后数据是否相同，相同的话rowspan累加，不相同的话跳出，接着执行下一个；
3、页面上的展示需要判断数据有没有rowspan，有的话合并

数据
dataList: [
    { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
    { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
    { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
    { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
    { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
    { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
    { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
    { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
    { people: '王五', propsalNum: 8, appealNum: 7, consultNum: 6 },
    { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
    { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
    { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
    { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
    { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 }
  ]
数据的循环判断：
  colspanMethod(dataList) {
    for (let i = 0; i < dataList.length; i++) {
      // 定义循环开始行
      let startRow
      // 定义需合并的行数
      let rowspan = 1
      // 循环到最后一行时
      if (i === dataList.length - 1) {
        // 如果最后一行和倒数第二行属性不同，则rowspan=1；否则直接结束循环
        if (dataList[i].people !== dataList[i - 1].people) {
          dataList[i].rowspan = rowspan
        }
        break
      }
      // 内层循环记录rowspan的数量
      for (let j = i; j < dataList.length - 1; j++) {
        // 记录循环结束的行数
        startRow = j
        // 属性相同则rowspan+1；否则直接结束内循环
        if (dataList[j].people === dataList[j + 1].people) {
          rowspan++
        } else {
          break
        }
      }
      // 为数组添加rowspan属性
      dataList[i].rowspan = rowspan
      // 控制外循环从内循环结束的行数开始
      i = startRow
    }
    this.tableData = dataList
  }
表格tbody的数据展示:
<tbody align="center">
  <tr v-for="(item, index) in tableData" :key="index">
    <td v-if="item.rowspan" :rowspan="item.rowspan">{{item.people}}</td>
    <td>{{item.propsalNum}}</td>
    <td>{{item.appealNum}}</td>
    <td>{{item.consultNum}}</td>
  </tr>
</tbody>
实现:

在这里插入图片描述

完整代码：
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue + table-合并行和列</title>
</head>
<body>
  <div id="vue_demo">
    <div>
      <table border="none" align="center">
        <caption>受理员业务统计表</caption>
        <colgroup>
          <col style="width: 160px" />
          <col style="width: 160px" />
          <col style="width: 160px" />
          <col style="width: 160px" />
        </colgroup>
        <thead>
          <tr>
            <th rowspan="2">受理员</th>
            <th colspan="3">工单类型</th>
          </tr>
          <tr>
            <th>建议件</th>
            <th>诉求单</th>
            <th>咨询件</th>
          </tr>
        </thead>
        <tbody align="center">
          <tr v-for="(item, index) in tableData" :key="index">
            <td v-if="item.rowspan" :rowspan="item.rowspan">{{item.people}}</td>
            <td>{{item.propsalNum}}</td>
            <td>{{item.appealNum}}</td>
            <td>{{item.consultNum}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#vue_demo',
    data: {
      dataList: [
        { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
        { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
        { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
        { people: '张三', propsalNum: 2, appealNum: 0, consultNum: 3 },
        { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
        { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
        { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
        { people: '李四', propsalNum: 8, appealNum: 6, consultNum: 6 },
        { people: '王五', propsalNum: 8, appealNum: 7, consultNum: 6 },
        { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
        { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
        { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
        { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 },
        { people: '王五', propsalNum: 7, appealNum: 6, consultNum: 6 }
      ],
      tableData: []
    },
    mounted () {
      let that = this
      setTimeout(() => {
      	// 判断数据只有一条时没有合并的必要
        that.dataList.length > 1
        	? that.colspanMethod(that.dataList)
        	: that.tableData = that.dataList
      }, 300)
    },
    methods: {
      // 合并行
      colspanMethod(dataList) {
        for (let i = 0; i < dataList.length; i++) {
          // 循环开始行
          let startRow
          // 需合并的行数
          let rowspan = 1
          // 循环到最后一行时
          if (i === dataList.length - 1) {
            // 如果最后一行和倒数第二行属性不同，则rowspan=1；否则直接结束循环
            if (dataList[i].people !== dataList[i - 1].people) {
              dataList[i].rowspan = rowspan
            }
            break
          }
          // 内层循环记录rowspan的数量
          for (let j = i; j < dataList.length - 1; j++) {
            // 记录循环结束的行数
            startRow = j
            // 属性相同则rowspan+1；否则直接结束内循环
            if (dataList[j].people === dataList[j + 1].people) {
              rowspan++
            } else {
              break
            }
          }
          // 为数组添加rowspan属性
          dataList[i].rowspan = rowspan
          // 控制外循环从内循环结束的行数开始
          i = startRow
        }
        this.tableData = dataList
      }
    }
  })
</script>

</html>
WuxiaoyanR
关注
  • 3
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
原生JS实现HTML－ TABLE 自动行合并插件
06-30
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次处理数据。 该类以纯原生JS编写，无需引入任何第三方库。 调用方法：new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。
JS实现动态修改table及合并单元格的方法示例
10-20
在计算小计时，函数遍历所有行和列，累加特定列（这里假设是第二列以后的列，因为`if(g>1)`）的数值。累加的结果被插入到新行的相应单元格中。 合并单元格通常涉及到`rowSpan`和`colSpan`属性。`rowSpan`定义了一个...
html中table表格的行、列怎么进行合并
最新发布
naozibuok的博客
05-24 1548
在HTML中，使用 <table> 元素来创建表格，而行（tr）和列（td或th）的合并可以通过和属性来实现。这两个属性允许单个表格单元格（td或th）跨越多个列或行。colspan：用于合并列。它定义了一个表格单元格应该横跨多少列。rowspan：用于合并行。它定义了一个表格单元格应该横跨多少行。
table合并列合并行
weixin_48604432的博客
09-24 1454
一、html代码 代码如下（示例）： <table> <tbody> <tr class="firstRow"> <td rowspan="2" colspan="4">table</td> <td rowspan="2" colspan="4">table</td> <td colspan="4" rowspan="1"&
使用小技巧实现el-table组件的合并行功能，ElementUI和ElementPlus都适用
都随它大小便吧
05-10 1万+
有时遇到一些需求，需要实现ElementUI或ElementPlus中，el-tabled组件合并单元格的功能，稍微了解一下它的数据格式，不难可以写出比合并方法。但是在鼠标经过单元行时，会出现高亮的行与鼠标经过的行不一致的BUG。因此还需要实现@cell-mouse-enter和@cell-mouse-leave这两个方法，才可解决此问题。
Table 合并行
qq_21569575的博客
11-26 3596
and-design-vue 结合vxe-table实现合并行 提示：span-method ，不能用于虚拟滚动、树形结构、展开行、固定列，合并的逻辑都是自行实现的 前言 vxe-table主要通过span-method 合并方法 ({ row, rowIndex, $rowIndex, _rowIndex, column, columnIndex, $columnIndex, _columnIndex, data }) 一、示例 二、自定义span-method方法 1.使用组件 代码如下（示例）
论element-ui表格的合并行和列（巨细节）
小邹的博客
03-15 1万+
​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。
保姆级教程 | 表格自动行合并实现
艾米栗的代码天地
08-26 1296
在 element-ui 和 antv 中都有表格合并，但如何确定哪几行要合并呢？ 在随机给定数据的情况下，如何实现自动合并呢？本文将一一解答这些问题。
table数据相同合并单元格
12-30
table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan 【table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan】
bootstrap Table实现合并相同行
10-16
总结，通过在 Bootstrap Table 的 `onLoadSuccess` 回调中调用自定义的 `mergeCells` 函数，我们可以实现对具有相同值的行进行合并，提高数据展示的清晰度。同时，根据实际需求，还需要完善 `mergeCells` 函数中的...
javascript原生表格
11-04
javascript原生表格javascript原生表格javascript原生表格
vue 原生table实现合并单元格，插入button按钮的功能
04-25
vue原始table实现合并单元格，插入button按钮，并且post服务以及实现了分页的功能
06 - table表格标签+ 行合并+列合并
热门推荐
web全栈开发的博客
12-05 1万+
1、table 表格标签属性 在小程序中查看 cellspacing="0" 表格边框合并； 表格：table 行：tr 列：td 属性： border:边框 width：宽 height：高 bordercolor:变宽颜色 cellspacing:单元格与单元格之间的距离 ...
elementUI的table合并
q140948940的博客
04-08 1161
关于table的合并，官方给的案例及其简单，所以当项目遇到此类问题，踩坑是无法避免的，其合并原理类似html的table合并。
Table表格合并
会飞的企鹅
03-17 1723
vue+elementUI 中的 Table 表格的合并功能，可配置，使用方便。 1、合并前后效果图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ffT5meLU-1615966361806)(https://raw.githubusercontent.com/libing-cheer/merge-table/master/src/assets/beforeMerge.png)] 2、代码实现 <template> <div class="hel.
table合并列
wojiaowuyali的博客
03-30 512
import React, { useState, useEffect, useRef } from 'react'; import { Table, Button, Tooltip, Modal, } from 'antd'; const Index = () => { const listData = [{ skuId: '143621', skuName: '无线产品7', storeName: 'pb顺丰仓', options: [{ ta.
蓝易云：html实现原生table并设置表格边框的两种方式
高性价比服务器就选：蓝易云
08-21 2555
这两种方式都可以用来实现带有边框的原生HTML表格，你可以根据需要选择适合的方式。使用CSS样式可以更灵活地控制表格的边框样式，包括线条样式、颜色、粗细等。希望以上解答对你有帮助。如果你有任何其他问题，请随时提问。使用HTML的表格边框属性可以直接设置表格的边框样式。设置每个单元格的边框为1像素的实线黑色。方式二：使用CSS样式设置表格边框。在上述代码中，通过CSS样式设置。方式一：使用HTML表格边框属性。将表格边框合并为单一边框，而。属性将设置表格的边框为实线。
el-table合并单元格
weixin_40112036的博客
02-14 9242
el-table合并单元格
原生table相同单元格合并三级
05-22
可以使用 rowspan 和 colspan 属性来合并单元格。例如，如果要将第一行的第一列和第二列合并成一个单元格，可以这样写： ```html <table> <tr> <td rowspan="2">第一列</td> <td>第二列-第一行</td> </tr> <tr> <td>第二列-第二行</td> </tr> </table> ``` 这样，第一列的单元格就会跨越两行。如果要在第二行将第二列和第三列合并成一个单元格，可以这样写： ```html <table> <tr> <td rowspan="2">第一列</td> <td colspan="2">第二列和第三列-第一行</td> </tr> <tr> <td>第二列和第三列-第二行</td> <td>第二列和第三列-第二行</td> </tr> </table> ``` 这样，第二列和第三列的单元格就会跨越两列。注意，合并单元格时要保证跨度相同，否则可能会导致表格错乱。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值