如何使用 Vuetify 2.x 在表中的自定义默认行中使用 v-html？

Question

我开始使用 Vuetify 2.x。

我有一个表格，一些列应该用 html 显示。

所以我使用了下面的代码：

        <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
          <template v-slot:items="props">
            <tr>
              <td class="text-sm-center">{{ props.item.name}}</td>
              <td><span v-html="props.item.desc"></span></td>
            </tr>
          </template>
        </v-data-table>

但是从 Vuetify 2.0 开始，表已经改变了。

        <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
        </v-data-table>

不再使用“模板”。所以我不知道如何在某些列中应用“v-html”。

Answer 1

基于这个例子，你可以这样做：

  <v-data-table
          :headers="headers"
          :items="decorations"
          :items-per-page-options="[20]"
          class="elevation-1"
        >
 <template v-slot:item.desc="{ item }">
       <span v-html="props.item.desc"></span>
    </template>
        </v-data-table>