带有vuetify v数据表的HTML结构问题

Question

我使用NuxtJS和Vuetify。

我用“v数据表”做了一张桌子。我想在这个表格中的一些单元格中添加一些样式，特别是在一些单元格之间添加一个分隔符。

所以我在数据表中使用了“模板”和v-槽。下面是我的代码：

<v-data-table
                    v-model="selected"
                    :single-select="false"
                    item-key="id"
                    show-select
                    :headers="headers"
                    :items="dossiers"
                    :options.sync="options"
                    :server-items-length="totalDossiers"
                    :loading="loading"
                    :search="searchDossiers"
                    :items-per-page="20"
                    :footer-props="{ 'items-per-page-options': items_per_page }"
                    class="elevation-4 table-cursor"
                    @click:row="goDossier"
                >
                    <template v-slot:[`item.ville`]="{ item }">
                        <td
                            class="array-right-border d-flex align-center justify-center"
                        >
                            {{ item.ville }}
                        </td>
                    </template>
                </v-data-table>


<style>
.array-right-border {
    border-right: 1px solid rgba(0, 0, 0, 0.205);
    height: 100%;
}
</style>

它工作得很好，但是当我查看HTML检查器时，我发现我正在vuetify表的基"td“标记中创建一个"td”标记。这并不是很干净，并导致了一个关于边界的抵消问题。所以我必须先删除它，否则我可以把我的“数组-右边框”类放在第一个。有什么想法吗？

html检查器

Answer 1

没有必要在<td>插槽中放置一个新的item.<name>标记。

静态CSS类可以放置在特定列的headers对象的cellClass属性中：

<v-data-table
  :headers="headers"
  ...
>
  <template v-slot:[`item.ville`]="{ item }">
    {{ item.ville }}
  </template>
</v-data-table>

...

data () {
  return {
    headers: [
      {
        value: 'ville', 
        cellClass: 'array-right-border d-flex align-center justify-center' 
      },
      ...
    ]
  }
}

看一看卡路里栏在这个CodePen演示中。