vue實戰——對象數組嵌套數組循環展示爲表格

要實現的效果：跨行。

數據：對象數組中的每一項，items屬性仍是一個數組。

data:[
  {
    clientName:'中國移動',
    tenderAmount:'2',
    items:[
      {projectName:'紅旗鎮中心城區海綿公園及周邊配套設施改造工程',projectStatus:'招標'},
      {projectName:'瀋陽泉銀物業有限責任公司綠化提升項目',projectStatus:'擬在建'},
    ]
  },
  {
    clientName:'中國聯通',
    tenderAmount:'4',
    items:[
      {projectName:'壤塘縣大伊裏村脫貧攻堅勒寨吉祥橋建設工程',projectStatus:'招標'},
      {projectName:'秀山縣垃圾焚燒發電項目',projectStatus:'中標'},
      {projectName:'東西部扶貧協作非貧困村衛生室建設項目',projectStatus:'中標'},
      {projectName:'蒙城縣人居環境建設項目',projectStatus:'招標'},
    ]
  },
],

方法1：tbody第一層循環，tr第二層循環，如果有第三層循環只能使用div、span等。

<table id="partnerTable">
  <thead>
    <tr>
      <th>客戶名稱</th>
      <th>招標數</th>
      <th>項目名稱</th>
      <th>項目狀態</th>
      <th>操作</th>	
    </tr>
  </thead>
  <tbody v-for="item1 in data">
    <tr v-for="(item2,index) in item1.items">
      <td v-if="!index" :rowspan="item1.items.length">{{item1.clientName}}</td>
      <td v-if="!index" :rowspan="item1.items.length">{{item1.tenderAmount}}</td>
      <td>{{item2.projectName}}</td>
      <td>{{item2.projectStatus}}</td>
      <td>
        <button style="margin-right:10px;">訂閱</button>
        <button>查看詳情</button>
      </td>
    </tr>
  </tbody>
</table>