vue.js - 为Vuetify数据表中的<td>和<tr>添加类？

Question

 <v-data-table
      class="elevation-1 user-table"
      :headers="table.headers"
      :items="usersList"
      :items-per-page="table.options.itemsPerPage"
      :no-data-text="table.options.noDataText"
      :footer-props="table.options.footerProps"
    >
    <template slot="items" slot-scope="props">
        <td class="text-xs-right pa-4">{{ props.item.id }}</td>
        <td class="text-xs-right pa-0">{{ props.item.username }}</td>
        <td class="text-xs-right pa-0">{{ props.item.createdAt }}</td>
      </template> 
  
</v-data-table>

我尝试使用 slot="items"更改 vuetify 表中 td 的类，但它不起作用？

我使用这个版本的 vuetify

• "vuetify": "^2.3.17",

Answer 1

将项目槽重构为此

<v-data-table
  class="elevation-1 user-table"
  :headers="table.headers"
  :items="usersList"
  :items-per-page="table.options.itemsPerPage"
  :no-data-text="table.options.noDataText"
  :footer-props="table.options.footerProps"
>
  <template v-slot:item="{ item }">
    <tr>
      <td class="text-xs-right pa-4"> {{ item.id }} </td>
      <td class="text-xs-right pa-0"> {{ item.username }} </td>
      <td class="text-xs-right pa-0"> {{ item.createdAt }} </td>
    </tr>
  </template>
</v-data-table>

你的代码有什么问题:

1. 您使用了items而不是item => <template slot="item" slot-scope="props">
2. 你错过了tr元素