использовать значок в таблице начальной загрузки - PullRequest
Новая
       15

использовать значок в таблице начальной загрузки

0 голосов
/ 26 июня 2019

У меня есть этот массив для данных моей таблицы в bootstrap-vue, и моя проблема в том, что я хочу использовать значок в своей таблице, но когда я использую что-то подобное, в строке отображается «», а браузер не отображает значок.Каково решение этой проблемы ?? 

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>

1 Ответ

1 голос
/ 26 июня 2019

Причина, по которой это не работает, заключается в том, что данные экранированы, то есть HTML-код в данных не имеет никакого эффекта, и компонент font-awesome-icon никогда не будет отображаться. Вы могли бы использовать v-html, но это не очень безопасно, и я не думаю, что компоненты визуализируются в v-html (я никогда не пробовал)? Вероятно, лучшим решением для этого является использование слотов с ограниченным пространством.

Нажмите здесь для примера кода ручки

Документы: https://bootstrap -vue.js.org / документы / компоненты / таблица / # пользовательские рендеринг данных . 

<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 },
]

Надеюсь, это поможет.

...