web-dev-qa-db-ja.com

Vuetify v-data-table、HTMLでヘッダーテキストをレンダリングする方法

Vuetifyドキュメント は、次のようにobject属性を持つヘッダーのtext配列を渡すことを提案します。

[{
    text: string;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

しかし、合格した場合：

[{
    text: string = "<div>Foo</div><div>Bar</div>;
    value: string;
    align: 'left' | 'center' | 'right';
    sortable: boolean;
    class: string[] | string;
    width: string;
}]

HTMLをレンダリングしません（テキストをエスケープします）。

それで、どのようにレンダリングするのですか[〜＃〜] html [〜＃〜]？

vue.jsvuetify.js
5
Artur Grigio

私はあなたの問題の解決策を見つけました：

 <template v-slot:item.description="{item}">
   <div v-html="item.description"></div>
 </template>

説明をオブジェクトの属性に置き換えるだけです：

オブジェクト：

ここではオブジェクトデータテーブルの画像

1
gilou.31

更新されたバージョンを使用している場合に注意するべきことは、

<template slot="headers" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>

今でしょ

<template slot="header" slot-scope="props">
<th><div>Foo</div><div>Bar</div></th>

私がテストしているバージョンはv2.2.8ですが、おそらくv2で変更されました

1
Anton Korab