[Vuejs]-Insert HTML attributes in VueJS Table

by

0👍

based on the documentation, there’s a custom data rendering for b-table. there will be 2 available options for this.

  1. use templating for generating the table
<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 approach. (not recommended, because it only supports raw HTML content)
<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>'
        }
    ]
})

Leave a comment