Визуализированный HTML в заголовке таблицы bootstrap-vue - PullRequest
Новая
       42

Визуализированный HTML в заголовке таблицы bootstrap-vue

0 голосов
/ 14 мая 2019

Я делаю сайт, который использует NuxtJS, Bootstrap Vue и vue-i18n.

У меня есть таблица (<b-table>), которая показывает площади в квадратных метрах, а заголовок должен отображать: кв. М на английском языке и m 2 (m<sup>2</sup>) в переводе.

Таким образом, метка поля заголовка выводится из языка JSON i18n в метку заголовка таблицы отдельного файлового компонента. Строка рисуется правильно, но, к сожалению, HTML-часть не отображается, поэтому на странице я вижу m<sup>2</sup>.

Вот как я пытался ее решить (примеры упрощены - из них удалены части):

hu.json (файл локали перевода) 

{
  "in_numbers": {
    "space": "m<sup>2</sup>"
  }
}

tableComponentFile.vue (один файловый компонент) 

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="12">
        <b-table
          :items="floors"
          :fields="tableHeader"
        />
          <template slot="HEAD_space" slot-scope="data">
            <span v-html="data.label"></span>
          </template>
        </b-table>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  computed: {
    floors() {
      return [
        { space: 552.96 },
        { space: 796.27 }
      ]
    }
  },
  data() {
    return {
      tableHeader: [
        {
          key: 'space',
          label: this.$t('in_numbers.space'),
          sortable: false
        }
      ]
    }
  }
}
</script>

Итак, все работает нормально, за исключением того, что я не могу отобразить HTML из локали json в заголовке таблицы - поэтому таблица визуализируется с данными в ней, а в других компонентах эта <span v-html="$t('in_numbers.space')"></span> техника работает просто отлично.

Это не сработает, если я попробую m & sup2; (&sup2;) или что-нибудь еще.

Проблема в том, что <template slot>, похоже, ни на что не реагирует (на самом деле я не уверен, что это работает) - но это должно произойти, как сказано в документации (https://bootstrap -vue.js.org / документы / компоненты / стол # заказ данных рендеринга )

Кто-нибудь видит способ визуализации HTML в заголовке таблицы bootstrap-vue?

1 Ответ

0 голосов
/ 15 мая 2019

ОК, я решил это - в коде был ненужный / - изначально <b-table> был самозакрывающимся тегом, и после добавления слота я пропустил его изменение.

Я исправил ошибку, и слот bootstrap-vue HEAD_ начал работать, и теперь все отображается правильно.

Итак, решение выглядит так:

hu.json 

{
  "in_numbers": {
    "space": "m<sup>2</sup>"
  }
}

tableComponentFile.vue 

<template>
  <b-container fluid>
    <b-row>
      <b-col cols="12">
        <b-table
          :items="floors"
          :fields="tableHeader"
        >
          <template slot="HEAD_space" slot-scope="data">
            <span v-html="data.label"></span>
          </template>
        </b-table>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  computed: {
    floors() {
      return [
        { space: 552.96 },
        { space: 796.27 }
      ]
    }
  },
  data() {
    return {
      tableHeader: [
        {
          key: 'space',
          label: this.$t('in_numbers.space'),
          sortable: false
        }
      ]
    }
  }
}
</script>
...