前端表格列合并

最新推荐文章于 2025-04-10 17:04:31 发布

可爱的黑山样

最新推荐文章于 2025-04-10 17:04:31 发布

阅读量2.1k

点赞数

分类专栏：学习笔记文章标签： html vue javascript

本文链接：https://blog.youkuaiyun.com/qq_42275614/article/details/108520665

版权

学习笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了前端如何实现表格列合并。主要思路包括：为每一行数据的每一列设置合并属性，当有同列数据合并时保留第一个单元格并设置相应属性，而其他相同单元格则隐藏。通过自定义函数来管理合并属性。在Vue中，详细展示了实现这一功能的主要代码和数据结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表格列合并。相邻行，同一列相同的数据进行合并

原始表格展示：在这里插入图片描述
列合并之后：

（1）主要思路是：给每一行数据的每一列（即每个单元格） 设置其rowspan和display属性；
（2）当有同列数据合并时，保留第一个单元格，设置其rowspan 属性为相同的个数，“舍弃”其他相同的单元格，设置其display属性为none；
（3）通过 mergeData 函数给每一列自定义两个属性来分别记录rowspan 属性和display；

主要的javaScript函数：

 /**
  * 表格合并处理
  *  TODO 当列大量数据重复时，数据条数展示不对；
  *    建议展示序号；
  *    此处额外增加了 username 无关字段；仅供演示；
  * @param tableData
  * @returns {*}
  */
  mergeData(tableData) {
    try{
      for (let item in tableData[0]) {
        let current = 0;
        let index = 0; //需要在下面for循环之外定义，不然会有错误的结果
        while (current < tableData.length) {
          tableData[current][item + 'Cols'] = 1;
          tableData[current][item + 'Display'] = false;
          // 此处 index 应该 < tableData.length  而不是 <=
          for (index = current + 1; index < tableData.length; index++) {
            if (tableData[current][item] === tableData[index][item]) {
              tableData[current][item + 'Cols']++;//colspan递增1
              tableData[index][item + 'Display'] = true;//隐藏重复的列
            }else{
              break;
            }
          }
          //从当前值重新计数
          current = index;
        }
      }
    }catch (e) {
      this.$hMessage.error('表格合并出错：' + e);
    }
    //console.table(tableData);
    return tableData;
  },

主要的html代码：

<table class="table table-bordered">
   <thead>
   <tr>
     <th>序号</th>
     <th>第一列</th>
     <th>第二列</th>
     <th>第三列</th>
     <th>第四列</th>
   </tr>
   </thead>
   <tbody>
   <tr v-for="item in tableData" :key="item.id">
     <td>{{ item.id }}</td>
     <td :rowspan="item.mathNumberCols" :class="{hidden: item.mathNumberDisplay}">{{ item.mathNumber }}</td>
     <td :rowspan="item.dayTypeCols" :class="{hidden: item.dayTypeDisplay}">{{ item.dayType }}</td>
     <td :rowspan="item.chooseCols" :class="{hidden: item.chooseDisplay}">{{item.choose}}</td>
     <td :rowspan="item.usernameCols" :class="{hidden: item.usernameDisplay}">{{item.username}}</td>
   </tr>
   </tbody>
 </table>

Vue data中的数据：

data() {
 tableData: [
   {
      id: '1',
      mathNumber: '20',
      dayType: '星期一',
      choose: '是',
      username: 'Sky'
    },
    {
      id: '2',
      mathNumber: '10',
      dayType: '星期一',
      choose: '否',
      username: 'Vpcloud'
    },
    {
      id: '3',
      mathNumber: '10',
      dayType: '星期一',
      choose: '否',
      username: 'Liu'
    },
  ],
},
created() {
  this.mergeData(this.tableData);
},