vuetify 数据表的可定制性如何？答案

【问题标题】：How customizable is vuetify data tables?vuetify 数据表的可定制性如何？
【发布时间】：2021-04-19 20:29:48
【问题描述】：

我正在努力实现上述结果。我已经在我的 vue 项目中使用了该表。

这段代码是来自 Vuetify 的数据表的模板。

<v-card>
        <v-card-title>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
        </v-card-title>
        <v-data-table
          :headers="headers"
          :items="tableData"
          :search="search"
        ></v-data-table>
      </v-card>

用基本数据填充表格很好，我已经这样做了，但我需要添加“再次发送”链接/按钮，并用一个方法连接它。或与此相关的任何其他自定义，例如黄色项目符号点。这会很难做到吗？

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

为此，我们可以使用item 或item.<name> Slots，您可以在数据表 API https://vuetifyjs.com/en/api/v-data-table/#slots 中了解更多信息

你的代码可以是这样的：

    <v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
    >
      <template v-slot:item.status="{ item }">
        
        <template v-if="item.status == `registered`">
          {{ item.status }} 
        </template>
        
        <template v-else>
          {{ item.status }} - <v-btn @click="AddSendBtnMethod(item.id)"> send again<v-btn>
        </template>
        
      </template>
    </v-data-table>

Here 是来自 Vuetify 的示例，已更改以显示其工作原理

【讨论】：