Как бы мы помещали изображения в ячейку таблицы. В базе данных есть URL-адрес изображения, но вы не знаете, как попасть в обычную строку таблицы Buefy, скажем, например, вторую ячейку?
Аватары / изображения в таблице Buefy
Ответы (1)
Вы можете получить желаемый результат, настроив собственную таблицу buefy.
Обратите внимание, как я оборачиваю столбцы внутри slot-scope
с именем props
<b-table :data="banners" paginated per-page="5">
<template slot-scope="props">
<b-table-column field="id" label="ID" width="40" numeric>{{ props.row.id }}</b-table-column>
<b-table-column field="image" width="90">
<img :src="props.row.image" alt />
</b-table-column>
<b-table-column field="name" label="Name">{{ props.row.name }}</b-table-column>
<b-table-column field="date_creted" label="Date created">{{ props.row.date_created }}</b-table-column>
<b-table-column field="status" label="Status">{{ props.row.status }}</b-table-column>
</template>
</b-table>
Скрипт
banners: [
{
id: 1,
image: "https://picsum.photos/200",
name: "Sample banner",
date_created: "2016-10-15 13:43:27",
status: "Active"
},
{
id: 2,
image: "https://picsum.photos/200",
name: "Banner the great",
date_created: "2016-12-15 06:00:53",
status: "Active"
},
{
id: 3,
image: "https://picsum.photos/200",
name: "Awesome Banner",
date_created: "2016-04-26 06:26:28",
status: "Inactive"
},
{
id: 4,
image: "https://picsum.photos/200",
name: "Hellp Banner",
date_created: "2016-04-10 10:28:46",
status: "Active"
},
{
id: 5,
image: "https://picsum.photos/200",
name: "Dating Banner",
date_created: "2016-12-06 14:38:38",
status: "Inactive"
}
]
Рабочий пример здесь
person
claudios
schedule
11.02.2020