在VueJS表中插入HTML属性

Question

我们如何在vueJS 中向单元格添加html/boootstrap元素

<b-table striped show-empty :items="filtered">
<template slot="top-row" slot-scope="{ fields }">
<td v-for="field in fields" :key="field.key">
<input v-model="filters[field.key]" placeholder="Search">
</td>
</template>
</b-table>

下方的屏幕截图

Answer 1

基于文档，b-table有一个自定义的数据呈现。将有2个可用选项。

1. 使用模板生成表

<b-table :fields="fields" :items="items">
<!-- this is only for generating progress -->
<template v-slot:cell(progress)="data">
<b-progress max="100" class="mb-3">
<b-progress-bar variant="primary" :value="data.value"></b-progress-bar>
</b-progress>
<!-- for default value -->
</template>
<template v-slot:cell()="data">
<i>{{ data.value }}</i>
</template>
</b-table>

2. v-html方法。(不推荐使用，因为它只支持rawHTML内容(

<b-table :items="items">
<template v-slot:cell(html)="data">
<span v-html="data.value"></span>
</template>
</b-table>
.
.
.
data: () = ({
items: [
{
text: 'This is <i>escaped</i> content',
html: '<div class="progress"><div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45" class="progress-bar progress-bar-striped progress-bar-animated" style="width: 45%;">45</div></div>'
}
]
})