Question

我在bootstrap-vue中有这个数组用于存放我的表的数据，我的问题是我想在表中使用图标，但是当我使用类似的东西向我显示“在字符串中并且浏览器不呈现icon”时。该问题的解决方案是什么？

items:[
{isActive: true,isMember: '<font-awesome-icon icon="user-secret" />',registerCounter: 4},
{isActive: true,isMember: '<font-awesome-icon icon="user-secret" />',registerCounter: 4},
]

这是我的表格标签：

<b-table :items="items"></b-table>

Answer 1

不起作用的原因是因为转义了数据，这意味着数据中的HTML无效，并且font-awesome-icon组件将永远不会呈现。您可以使用v-html，但这不是很安全，我不认为组件可以在v-html中呈现（我从未尝试过）？也许最好的解决方案是使用作用域插槽。

Click here for codepen example

文档：https://bootstrap-vue.js.org/docs/components/table/#custom-data-rendering。

<b-table :fields="fields" :items="items">
    <template slot="isMember" slot-scope="{ item: { isMember }}">
        <i :class="'fas ' + isMember"></i>
        <!-- You can also use the font-awesome-icon component here -->
    </template>
</b-table>

您唯一需要做的就是拥有如下数据：

fields: [
  'isActive',
  'registerCounter',
  // This one needs a custom template, so we define the key and the label
  { key: 'isMember', label: 'Is Member' }
],
items: [
  { isActive: true, isMember: 'fa-user-secret', registerCounter: 4 },
  { isActive: true, isMember: 'fa-user-secret', registerCounter: 4 },
]

希望这会有所帮助。

在Boots Vue表中使用图标

1 个答案: