Нужна помощь в создании динамических интервалов на основе длины вложенных массивов

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>


​