el-table-column 显示图片
时间: 2023-11-22 19:44:26 浏览: 173
可以使用 el-table-column 的 scoped slot 来自定义列的内容,具体实现如下:
```html
<el-table :data="tableData">
<el-table-column prop="imageUrl" label="图片">
<template slot-scope="scope">
<img :src="scope.row.imageUrl" style="width: 100px; height: 100px;">
</template>
</el-table-column>
</el-table>
```
其中,`prop` 属性指定了该列对应数据项的属性名,`label` 属性指定了该列的标题。在 scoped slot 中,可以通过 `scope.row` 访问到当前行的数据,从而获取到该行对应的图片地址。
相关问题
element -plus el-table-column 显示图片
要在 element-plus 的 el-table-column 中显示图片,可以使用自定义模板来实现。具体步骤如下:
1. 在 el-table-column 中设置 prop 属性为图片的地址字段名,例如:prop="imageUrl"。
2. 在 el-table-column 中设置自定义模板,例如:template="#image-template"。
3. 在 el-table-column 所在的 el-table 中设置 scopedSlots 属性,例如::scopedSlots="{image: 'image'}"。
4. 在 el-table 所在的组件中定义自定义模板,例如:
```
<template #image-template="{row}">
<img :src="row.imageUrl" alt="图片">
</template>
```
这样就可以在 el-table-column 中显示图片了。
el-table-column 显示图片 上代码
可以使用 el-table-column 的 scoped slot 来自定义列的内容,具体实现如下:
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column label="头像">
<template slot-scope="scope">
<img :src="scope.row.avatar" alt="" width="50" height="50">
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
avatar: 'https://example.com/avatar1.jpg'
},
{
name: '李四',
avatar: 'https://example.com/avatar2.jpg'
}
]
}
}
}
</script>
在上面的代码中,我们使用了一个名为 avatar 的属性来存储每个人的头像地址,然后在 el-table-column 的 scoped slot 中使用了一个 img 标签来显示头像。注意,我们需要在 img 标签中使用 :src 绑定头像地址,而不是直接写死在模板中。