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

Question

我有一个Vue应用程序，这是使用Vuetify构建的，我想创建一个表格，其中的单元格内容是一个复选框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 -->

数据源片段(稍后我将从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>' },
],

Answer 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上阅读更多关于它的信息。