如何解决在VueJS表中插入HTML属性
如何将html / boootstrap元素添加到vueJS中的单元格
<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>
解决方法
根据文档,b-table
有一个custom data rendering。会有2个可用选项。
- 使用模板生成表
<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>
-
v-html
方法。 (不建议使用,因为它仅支持原始 HTML 内容)
<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>'
}
]
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。