Vue.js 根据数据，进行Table单元格合并

Vue.js 根据数据，进行Table单元格合并

ITKouSyou

 表格代码

<table cellspacing="0" cellpadding="0" border="0" style="height: auto; width: 100%">
  <thead>
  <tr>
    <th>项目</th>
    <th>类型</th>
    <th>值</th>
  </tr>
  </thead>
  <tbody>
  <tr v-for="item in showList">
    <td :rowspan="item.keycount" v-if="item.keyshow">{{ item.key }}</td>
    <td :rowspan="item.keyDesccount" v-if="item.keyDescshow">{{ item.keyDesc}}</td>
    <td :rowspan="item.valuecount" v-if="item.valueshow">{{ item.value}}</td>
  </tr>
  </tbody>
</table>
开始使用了css的display和hidden标签去尝试，但是没有生效，所以就是用v-if来决定是否生成td

需要显示的list需要先通过下面的js方法进行处理，生成每个参数的对应count和show，count决定合并的个数，show则决定是否显示。当count为1时，说明相同的只有一个，所以show就是true，count大于2时show则为false。

/**
* 
* @param list 要处理的list
* @returns 返回处理好的list
*/
listHandle(list) {
  for (var key in list[0]) {
    var k = 0;
    while (k < list.length) {
      list[k][key + 'count'] = 1;
      list[k][key + 'show'] = true;
      for (var i = k + 1; i <= list.length - 1; i++) {
        if (list[k][key] == list[i][key] && list[k][key] != '') {
          list[k][key + 'count']++;
          list[k][key + 'show'] = true;
          list[i][key + 'count'] = 1;
          list[i][key + 'show'] = false;
        } else {
          break;
        }
      }
      k = i;
    }
  }
  return list
}
list数据举例

[
    {
        "key":"异地使用情况",
        "keyDesc":"最近常用通话地",
        "value":"淮北"
    },
    {
        "key":"异地使用情况",
        "keyDesc":"手机入网地",
        "value":"浙江杭州"
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码个数",
        "value":"6"
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码占比",
        "value":"21"
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫通话时长",
        "value":"17124"
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"被叫通话时长",
        "value":"10800"
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫被叫比例",
        "value":"158.56%"
    },
    {
        "key":"静默情况",
        "keyDesc":"最长连续静默天数",
        "value":"19"
    },
    {
        "key":"静默情况",
        "keyDesc":"月均手机静默天数",
        "value":"4.10"
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过15天的次数",
        "value":"1"
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过3天的次数",
        "value":"17"
    }
]
处理后showList数据

[
    {
        "key":"异地使用情况",
        "keyDesc":"最近常用通话地",
        "value":"淮北",
        "keycount":2,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"异地使用情况",
        "keyDesc":"手机入网地",
        "value":"浙江杭州",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码个数",
        "value":"6",
        "keycount":2,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"互通号码情况",
        "keyDesc":"互通电话号码占比",
        "value":"21",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫通话时长",
        "value":"17124",
        "keycount":3,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"被叫通话时长",
        "value":"10800",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"主被叫通话详情",
        "keyDesc":"主叫被叫比例",
        "value":"158.56%",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"最长连续静默天数",
        "value":"19",
        "keycount":4,
        "keyshow":true,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"月均手机静默天数",
        "value":"4.10",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过15天的次数",
        "value":"1",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    },
    {
        "key":"静默情况",
        "keyDesc":"连续静默天数超过3天的次数",
        "value":"17",
        "keycount":1,
        "keyshow":false,
        "keyDesccount":1,
        "keyDescshow":true,
        "valuecount":1,
        "valueshow":true,
        "listcount":1,
        "listshow":true
    }
]
 
————————————————
版权声明：本文为CSDN博主「ITKouSyou」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hx765287443/article/details/83085483