bulma - Buefy 表中的头像/图像

Question

我们如何将图像放入表格单元格中。数据库具有图像的 URL，但不确定如何进入常规 Buefy 表行，例如第二个单元格？

Answer 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"
        }
      ]

这里的工作示例