需要有关基于嵌套数组长度进行动态行跨度的帮助

Question

我有一些数据和数组的数组。在嵌套数组中，还有其他一些数组。我需要根据数组长度设计一个数组。行跨度应基于数组的长度来完成。我该怎么办？有人帮忙

我的数组就是这样。

data: Array(2)
  0:
      details: Array(2)
        0:
        amount: (...)
        balance_quantity: (...)
        count_name: (...)
        lot_no: (...)
        quantity: (...)
        receive_date: (...)
        received_quantity: (...)
        unit_price: (...)
        yarn_count_composition: (...)

        1: 
        amount: (...)
        balance_quantity: (...)
        count_name: (...)
        lot_no: (...)
        quantity: (...)
        receive_date: (...)
        received_quantity: (...)
        unit_price: (...)
        yarn_count_composition: (...)

      lc_date: "2019-03-21"
      lc_no: "786"
      pi_no: "pi-677"
      supplier_id: 6
      Supplier_name: "Reedisha Blended Yarn Ltd"

  1:
     details: Array(4)
     lc_date: "2019-03-23"
     lc_no: "lc-70"
     pi_no: "pi-900"
     supplier_id: 3
     supplier_name: "Square Textiles Ltd"

​

 <tbody>
            <tr v-for="lcDetails in fields.data">
                <td style="text-align: center;"> </td>
                <td colspan="3" style="text-align: center;">{{lcDetails.supplier_name}}</td>
                <td colspan="2" style="text-align: center;"></td>
                <td style="text-align: center;">{{lcDetails.pi_no}}</td>
                <td style="text-align: center;">{{lcDetails.lc_date}}</td>
                <template >
                    <td colspan="1">
                        <div v-for="details in lcDetails.details">
                            <p style="border-bottom: 1px solid black;">{{details.count_name}}</p>
                        </div>
                    </td>
                </template>

                <td colspan="3">

                    <div v-for="details in lcDetails.details">
                        <p style="border-bottom: 1px solid black;">{{details.yarn_count_composition}}</p>
                    </div>
                </td>
</tr>
</tbody>


​