Buefy表中的头像/图像
Buefy表中的头像/图像
提问于 2019-12-10 07:07:45
我们如何将图像放入表格单元格中。数据库有图像的URL，但是不确定如何进入常规的Buefy表行，比如说第二个单元格？
回答 1
Stack Overflow用户
发布于 2020-02-11 17:43:52
您可以通过定制自己的buefy表来获得所需的结果。
注意我是如何将列包装在一个名为props的slot-scope中的
<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"
}
]工作示例here
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59257922
复制相关文章
相似问题
腾讯云开发者
