Dynamic table with dynamic rowspans using Vue.js and element plus

Question

Hello i created a dynamic table component using element-plus, in Vue.js, like this (simple code)

<el-table :data="tableData" v-loading="loading" :show-header="header" class="Gema" border
      style=" width:100% !important; margin-bottom: 25px; padding:15px" :scrollbar-always-on="true"  :summary-method="summaryData"
    :show-summary="isSum" :span-method="objectSpanMethod">
      <el-table-column v-for="column in columns" :fixed="column.fixed" :key="column.prop" :label="column.label"
        :prop="column.prop" :width="column.width" :sortable="column.sortable" >
        <template v-if="column.prop === 'percentagem'" #default="scope">
          <div :class="getPercentagemClass(scope.row.percentagem)">
            {{ scope.row.percentagem }}
          </div>
        </template>
        <template v-if="column.prop === 'foto'" #default="scope">
          <img v-if="scope.row.foto" :src="'storage' + scope.row.foto" alt="Image"
            style="max-width: 100px; max-height: 100px;" />
          <img v-else :src="'storage/error/no-image.jpg'" alt="Image" style="max-width: 100px; max-height: 100px;" />
        </template
    
..... more column possibilities
</table>

What i want, is that in a table, i have a form, that i can add several data, that is assigned to one single file with an id. What i want, is based on the number of data with same file_id it defines dynamically the different rowspan i need in the column that i will have a button to download the file , so, for example, if i have 3 rows of data for file with id 1, then the specific column with the button (let's called its prop 'fatura') , and 2 rows of data with file_id 2, it should make rowspan 3 and then rownspan 2, so i can have the button appear only 2 times, instead of 5 times .

I tried the approach they explain in the element-plus documentation, but couldn't make it work .

what is the best approach i should do to accomplish this? Thank you in advance