Аватары / изображения в таблице Buefy

Как бы мы помещали изображения в ячейку таблицы. В базе данных есть URL-адрес изображения, но вы не знаете, как попасть в обычную строку таблицы Buefy, скажем, например, вторую ячейку?


person BC.    schedule 09.12.2019    source источник


Ответы (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