element plus 表格组件怎样在表格中显示图片

简介: element plus 表格组件怎样在表格中显示图片

官方给的:

<el-table-column label="Thumbnail" width="180">
    <template #default="scope">
        <div style="display: flex; align-items: center">
            <el-image :preview-src-list="srcList"/>
        </div>
    </template>
</el-table-column>

实际应用中的:

首先获取数据中的img

在组件中绑定:

手动绑定scope ;要获取数据中当前行的img,只需要绑定 scope.row.img 即可(img是字段名)

组件完整代码:

<el-table-column label="景区图片" width="240">
    <template #default="scope">
        <el-image style="width: 100px; height: 80px; padding: 5px;" :src="scope.row.img" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.img]" :initial-index="4" fit="cover" />
    </template>
</el-table-column>

效果:

目录
相关文章
|
10月前
|
缓存 前端开发 JavaScript
Vue3 写法示例与规范指南
Vue3项目规范指南:统一目录结构、命名规则与Composition API用法,涵盖组件通信、性能优化及ESLint+Prettier工具链配置,提升代码可维护性与团队协作效率。(239字)
1340 1
npm WARN deprecated core-js@2.6.12 core-js@<3.3 is no longer maintained and not recommended for usa
npm WARN deprecated core-js@2.6.12 core-js@<3.3 is no longer maintained and not recommended for usa
1488 0
|
11月前
IDEA 使用 lombak 时的一个小警告:Generating equals/hashCode implementation but without a call to superclass
今日在IDEA中使用Lombok时遇到@Data注解的黄色警告,提示equals和hashCode未调用父类方法。虽不影响运行,但影响美观。可通过@EqualsAndHashCode(callSuper = true)或在lombok.config中配置默认行为解决,推荐后者统一管理,彻底消除警告。
|
关系型数据库 MySQL 数据库连接
docker拉取MySQL后数据库连接失败解决方案
通过以上方法,可以解决Docker中拉取MySQL镜像后数据库连接失败的常见问题。关键步骤包括确保容器正确启动、配置正确的环境变量、合理设置网络和权限,以及检查主机防火墙设置等。通过逐步排查,可以快速定位并解决连接问题,确保MySQL服务的正常使用。
3104 82
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
2074 0
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
1287 0
Vue3 子传父 暴露数据 defineExpose
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
9836 90
|
SQL XML Java
MyBatis-Plus多表关联查询
MyBatis-Plus多表关联查询
2728 0