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

Screenshot below

解决方法

根据文档，b-table有一个custom data rendering。会有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>

1. 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>'
        }
    ]
})