Buefy table 如何在 td 中渲染 html

Question

我有 Buefy 的 Nuxt 项目。有 b-table 元素看起来像：

<b-table :data="formats">
    <b-table-column
        v-slot="{ row }"
        label="Aspect ratio"
        field="value"
        >{{ row.value }}</b-table-column
    >
    <b-table-column
        v-slot="{ row }"
        label="Assigned visuals"
        field="assignedVisuals"
        >{{ getAssignedVisuals(row.key) }}</b-table-column
    >
    <b-table-column
        v-slot="{ row }"
        label="Screens count"
        field="devicesCount"
        >{{ row.devicesCount }}</b-table-column
    >
</b-table>

第二列调用 getAssignedVisuals(row.key) 在某些情况下应该 return html 字符串。但我无法渲染 html 导致 Buefy 转义字符串并显示原始 html 字符串。有人可以告诉我我该怎么做吗？

函数如下：

getAssignedVisuals(ratio) {
    ratio = ratio.split('x');

    // This is the problem
    if( !ratio.length || ratio.length < 2 ) return '<span class="is-danger">Missing visual</span>';

    ratio = ratio[0] / ratio[1];

    return this.files.reduce((reduced, item) => {
        const itemRatio = item.width / item.height;
        if( itemRatio === ratio || (itemRatio < ratio + 0.01 && itemRatio > ratio -0.01) ) ++reduced;
        return reduced;
    }, 0);
}

Answer 1

解决方案是使用带有 v-html 的插槽模板，例如

<b-table-column
    label="Assigned visuals"
    field="assignedVisuals"
    v-slot="{ row }"
>
    <template v-html="getAssignedVisuals(row.key)"></template>
</b-table-column>

Buefy table 如何在 td 中渲染 html

Buefy table how to render html in the td

html

vuejs2

buefy