//-----------table显示图片
时间: 2023-10-03 11:06:35 浏览: 74
显示图片
要在表格中显示图片,你可以使用Vue的插槽(slot)功能以及el-table-column组件的template属性。首先,你需要在el-table-column组件中添加一个prop属性,它与tableData中的图片数据字段相对应。然后,在template标签中使用slot-scope属性来访问行数据,这样你就可以在里面放置一个img元素,将其src属性绑定到scope.row中的图片字段。最后,设置img元素的宽度和高度,以便正确显示图片。
下面是一个示例代码:
```
<el-table :data="tableData" border style="width: 100%;margin-top:20px;">
<el-table-column prop="picture" label="头像" align="center">
<template slot-scope="scope">
<img :src="scope.row.image" min-width="70" height="70" />
</template>
</el-table-column>
<el-table-column prop="name" label="人" align="center"></el-table-column>
<el-table-column prop="address" label="地址" align="center"></el-table-column>
</el-table>
```
在上面的代码中,我们使用了tableData数组中的image字段来显示图片。你可以根据自己的需求修改字段名称和样式。
阅读全文