前端表格列合并

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

原始表格展示：
列合并之后：

（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);
},