Блог

В настоящее время я заполняю следующую таблицу:

 <v-data-table
        :headers="headers_detInventario"
        :items="detalle_inventario"
        :search="search"
        :rows-per-page-items="rowsPerPageItems"
        :pagination.sync="pagination"
        class="elevation-1"
        no-data-text="No hay registros"
>
     <template v-slot:items="props">
        <td class="text-xs-center">{{ props.item.nombre }}</td>
        <td class="text-xs-center">{{ props.item.cantidad }}</td>
        <td class="text-xs-center">{{ props.item.precio }}</td>
        <td class="text-xs-center">{{ props.item.codigo }}</td>
        <td class="text-xs-center">{{ props.item.descuento }}</td>
        <td class="text-xs-center">{{ props.item.total_fila }}</td>
      </template>
</v-data-table>
  

и заголовок заполняется следующим образом:

 headers_detInventario:[
                {
                    text: 'Fecha',
                    align: 'left',
                    value: 'fecha'
                },
                { text: 'Detalle', value: 'detalle'},
                { text: 'Valor unitario', value: 'valor_unitario' },
                { text: 'Entrada', value: 'entrada', colspan: '2'

                },
                { text: 'Cantidad', value: 'cantidad' },
                { text: 'Acciones', value: 'name', sortable: false }
            ],
  

Поэтому визуально это выглядит так:

но мне нужно, чтобы он имел следующую форму head: