el-table-column里面的图片点击放大
时间: 2023-08-06 08:04:36 浏览: 163
如果你想在 `el-table-column` 中显示图片,并且支持点击放大,可以使用 `scoped-slot` 和 `el-dialog` 组件实现。
首先,在 `el-table-column` 中使用 `scoped-slot`,将图片显示在一个 `img` 标签中,同时为 `img` 标签绑定一个 `click` 事件,例如:
```html
<el-table-column label="图片">
<template slot-scope="scope">
<img :src="scope.row.imageUrl" @click="handleImageClick(scope.row.imageUrl)">
</template>
</el-table-column>
```
在上面的代码中,`scope.row.imageUrl` 是图片的链接地址,`handleImageClick` 是点击事件的处理函数。
接下来,定义 `handleImageClick` 方法,该方法会在图片被点击时打开一个 `el-dialog` 弹窗,将图片放大显示:
```javascript
methods: {
handleImageClick(url) {
this.dialogImageUrl = url;
this.dialogVisible = true;
}
}
```
在上面的代码中,`dialogImageUrl` 是一个响应式数据,用于存储当前需要显示的图片链接地址,`dialogVisible` 也是一个响应式数据,用于控制 `el-dialog` 是否可见。
最后,在模板中使用 `el-dialog` 组件显示图片:
```html
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" style="max-width: 100%;">
</el-dialog>
```
在上面的代码中,`:visible.sync` 用于双向绑定 `dialogVisible`,`dialogImageUrl` 是当前需要显示的图片链接地址。
这样,当用户点击图片时,就会打开一个弹窗,显示该图片放大后的效果。