如何在 DataTable body Vuetify 中显示复选框答案

【问题标题】：How to display Checkbox in DataTable body Vuetify如何在 DataTable body Vuetify 中显示复选框
【发布时间】：2020-09-07 05:29:36
【问题描述】：

我有一个使用 Vuetify 构建的 Vue 应用程序，我想创建一个表格，其中单元格内容是一个复选框 v-checkbox，但它呈现 html 字符串而不是表格主体内的复选框。

我使用v-data-table 作为主表。

为了说明：

我的代码：

<v-data-table :headers="headers"
              :items="menuaccess"
              :search="search"
              sort-by="alias"
              class="elevation-3"
              v-html="value"> <--- I tried add this but not working

<!-- other code -->

数据源sn-p（后面会从API获取数据）：

headers: [
    { text: '', align: 'start', value: 'alias' },
    { text: 'ASSET_EDIT', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
    { text: 'ASSET_VERIFICATION', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
    { text: 'ASSET_VIEW', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
    { text: 'CUSTOMER_COMPANY_EDIT', value: '<v-checkbox class="mx-2" label="Example"></v-checkbox>' },
],

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您需要将代码放在插槽模板中。

<v-data-table :headers="headers"
              :items="menuaccess"
              :search="search"
              sort-by="alias"
              class="elevation-3">
      <template v-slot:item.property_name="{ item }">
        <v-simple-checkbox v-model="item.property_name" />
      </template>
</v-data-table>

property_name 是数据对象的属性名称。

在documentation 中了解更多信息。

【讨论】：