原生table合并行和列

WuxiaoyanR

已于 2023-11-01 15:55:35 修改

阅读量5.9k

点赞数 3

于 2020-12-07 12:13:40 首次发布

本文链接：https://blog.csdn.net/qq_37881606/article/details/110806008

版权

前端杂烩专栏收录该内容

23 篇文章 1 订阅

订阅专栏

原生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>