el-form上传的图片怎么在el-table里面显示
时间: 2024-05-09 19:20:55 浏览: 90
可以使用自定义插槽的方式,在el-table的列中添加一个插槽,然后在插槽中显示上传的图片。
具体步骤如下:
1. 在el-table中的列中添加一个插槽,例如:
```html
<el-table-column label="图片">
<template slot-scope="scope">
<div class="image-cell">
<img :src="scope.row.imageUrl" alt="">
</div>
</template>
</el-table-column>
```
2. 在上传图片成功后,将图片的URL保存在el-form的model中,例如:
```js
this.$refs.upload.submit();
this.form.imageUrl = '/uploads/image.jpg';
```
3. 在el-table中的每一行数据中,将图片的URL传递给列的插槽,例如:
```html
<el-table :data="tableData">
<el-table-column label="名称" prop="name"></el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<div class="image-cell">
<img :src="scope.row.imageUrl" alt="">
</div>
</template>
</el-table-column>
</el-table>
```
其中,tableData是el-table的数据源,每一行数据中包含了图片的URL。在插槽中使用scope.row.imageUrl获取当前行的图片URL,然后显示在图片元素中即可。
阅读全文