【问题标题】:Adding class to <td> and <tr> in Vuetify data-table?在 Vuetify 数据表中为 <td> 和 <tr> 添加类?
【发布时间】:2021-03-21 13:34:04
【问题描述】:
 <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 table 中 td 的类,但它不起作用?

我使用这个版本的 vuetify

  • “vuetify”:“^2.3.17”,

【问题讨论】:

    标签: vue.js vuetify.js


    【解决方案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 => &lt;template slot="item" slot-scope="props"&gt;
    2. 你错过了tr元素

    【讨论】:

    • 谢谢,你的回答是对的。我已经更改了我的代码。否则,您知道如何使用 vuetify 更改文本大小吗?
    • @radiorz 如果更改 vuetify 组件的字体大小,您可以覆盖组件 sass 变量。 documentation of v-data-table sass variables
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-05-28
    • 2012-10-29
    • 2019-05-22
    • 1970-01-01
    • 2015-12-14
    • 1970-01-01
    • 2015-12-24
    相关资源
    最近更新 更多