[Vuejs]-Vuetify 2: Pass the additional attributes to item in v-data-table

you can do it by changing it from the slot directly like this :

<template>
<v-data-table :items="items">
    <template v-slot:item="props">
    <tr :id="'row-' + props.item.id"> <!-- Use a dynamic id -->
        <td>
        <!-- Your custom cell content -->
        <slot name="item.columnName" :item="props.item"></slot>
        </td>
        <!-- ... other columns ... -->
    </tr>
    </template>
</v-data-table>
</template>

OR … you can keep the same structure and update it on mounted like this :

<template>
<v-data-table :items="items">
    <!-- ... slots for headers and custom cells ... -->
</v-data-table>
</template>

<script>
export default {
data() {
    return {
    items: [
        { id: 1, /* other properties */ },
        { id: 2, /* other properties */ },
        // ... other items ...
    ]
    };
},
mounted() {
    this.items.forEach(item => {
    const rowElement = this.$el.querySelector(`tr[data-item-key="${item[this.itemKey]}"]`);
    if (rowElement) {
        rowElement.setAttribute('id', `row-${item.id}`);
    }
    });
}
};
</script>

After some time of checking. It is understood that you are trying to make an ID of each record. But, the problem is, there’s no uniques on each record(so it’s difficult to pin point the id of each). If so, we need to create an index of each. Therefore we need to make a function that creates index each of the records. By doing so, I make this sample function to make an ID each of the record.

<template v-slot:item.bar="{ item }">
    {{
        props2.items
        .map(function (x) {
            return x.bar;
        })
        .indexOf(item.bar) + 1
    }}
</template>

DEMO(forked)