Buefy表中的头像/图像

时间:2019-12-09 23:07:44

标签: bulma buefy

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

1 个答案:

答案 0 :(得分:0)

您可以通过自定义自己的buefy表来获得所需的结果。

请注意如何将列包装在名为slot-scope的{​​{1}}内

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>

工作示例here