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

Posted 2023-02-22

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

【英文标题】：How can I use v-html in customized default rows in the table using Vuetify 2.x?

【发布时间】：2019-12-04 00:21:24

【问题描述】：

我开始使用 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”。

【参考方案1】：

基于this example，您可以这样做：

  <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>