表格程式碼

<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
    }
]