vue.js 使用行跨度渲染表

Posted 2023-02-22

【中文标题】vue.js 使用行跨度渲染表

【英文标题】：vue.js render table with rowspans

【发布时间】：2018-11-06 09:18:07

【问题描述】：

我是 vue.js 的新手，我找不到使用 vue 将以下数据呈现到具有行跨度的 html 表中的方法。

   "title":"Monthly Sales",
   "monthlySales":[
      
         "product":"P123",
         "months":[
            
               "month":"January",
               "unitPrice":"$80",
               "unitsSold":2200
            ,
            
               "month":"February",
               "unitPrice":"$82",
               "unitsSold":1900
            ,
            
               "month":"March",
               "unitPrice":"$81",
               "unitsSold":1800
            
         ]
      ,
      
         "product":"Q456",
         "months":[
            
               "month":"January",
               "unitPrice":"$20",
               "unitsSold":200
            ,
            
               "month":"February",
               "unitPrice":"$22",
               "unitsSold":100
            
         ]
      
   ]

我想创建这样的输出：http://jsbin.com/hucufezayu/edit?html,output

我们如何用这些数据渲染这种表格？

【问题讨论】：

假设您正在使用组件，您不只是相应地定义组件吗？例如。 <custom-table> 包括 <row-span> 包括 <custom-row>

【参考方案1】：

这应该可以解决问题：

<template>
  <div id="app">
    <table border="1" style="border-collapse: collapse">
      <thead>
      <th>Product</th>
      <th>Month</th>
      <th>Unit price</th>
      <th>No. sold</th>
      </thead>
      <tbody>
      <template v-for="mSale in salesData.monthlySales">
        <tr v-for="(month, key) in mSale.months">
          <td v-if="key == 0" :rowspan="mSale.months.length">    mSale.product</td>
          <td>month.month</td>
          <td>month.unitPrice</td>
          <td>month.unitsSold</td>
        </tr>
      </template>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default 
    name: 'app',
    data() 
      return 
        salesData: jsonData
      
    
  
</script>

【讨论】：

v-if="key == 0"有什么意义？

是允许仅在系列的第一个occurrency显示月份值，从而允许使用rowspan。有关行跨度的更多信息，请参阅w3schools.com/tags/att_td_rowspan.asp。

@yogmk 我忘了在回答中提到你，对不起。

没关系。我发现您的解决方案在我当前的项目中很有用。所以谢谢你。