0

I wanted to make my table rows link into some other pages and I don't wanna use the @click:row by default because it removes the open in a new tab in contextmenu. so I used the v-slot:item to manipulate my rows and adding a tag.

I added it successfully but the problem is that it breaks the default Vuetify styles! After adding display: contents (I found this solution from Wrapping HTML table rows in tags) it was better but it won't be like the other tables.

My table looks likes this when there's an a tag: enter image description here (there's no border and other stuff)

The default look is like this: enter image description here

My Codes looks like this:

<template v-slot:item="{ item }">
  <tr>
    <a href="" style="display: contents; color: #212121">
      <td>{{ item.name }}</td>
      <td>{{ item.ownerName }}</td>
      <td>{{ item.cartNumber }}</td>
      <td>IR-{{ item.shabaNumber }}</td>
      <td>{{ item.accountNumber }}</td>
      <td>
        <v-btn
          fab
          x-small
          text
          class="px-0 ml-2"
          color="#F40F02"
          @click.stop="deleteItem(item.id)"
        >
          <v-icon color="#F40F02">mdi-delete</v-icon>
        </v-btn>
      </td>
    </a>
  </tr>
</template>
Hasan Parasteh
  • 431
  • 8
  • 25
  • 1
    it's invalid html - anchors cannot be a child of tr. also if your td parent is display contents, then the table alignment won't work either as td parent needs to be display table row. The best you could do is have your link in a td and then use js to bind a click to the row that will click your link when the row is clicked – Pete Jun 10 '21 at 09:41
  • @Pete Thanks for your answer. Can you give me a snippet code that how it could be done? – Hasan Parasteh Jun 10 '21 at 09:51
  • https://stackoverflow.com/questions/17147821/how-to-make-a-whole-row-in-a-table-clickable-as-a-link#answer-33214588 – Pete Jun 10 '21 at 10:07

0 Answers0