Element-ui表格中图片放大简便方法

之前在找怎么存放element-ui中表格内的图片，并实现点击放大的时候，看到网上使用的方法有用el-dialog，或者是v-image-preview。

用dialog的时候太长的图片会超出屏幕

用v-image-preview的时候，使用多选的表格时，选择处的小格子不知道为什么总是高亮（如果有大佬知道怎么解决请告诉我~）

而且很重要的是，这两个方法要实现放大后图片的缩放都得额外加代码（对于我这个对前端了解不多的人来说，不知道该如何下手）

经过两天摸爬滚打发现可以使用element-ui提供的 previewSrcList 开启预览大图的功能zhixu

<template slot-scope="scope" ><el-image :src="scope.row.url" :fit="fit" :preview-src-list="srcList" @click="srcList.push(scope.row.url)"></el-image>
</template>

只需要少量代码即可实现表格内图片点击查看预览大图，而且大图还可以用鼠标滚轮或点击按钮实现放大缩小，以及旋转，非常简便

做项目的时候，遇到这个问题，网上没搜到比这更简便而且功能齐全的方法，于是发出来

前端学的不多，如大佬有更好意见，恳请提出~

Element-ui表格中图片放大简便方法相关推荐

element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...
element ui表格中添加开关按钮
又是我们可能会需要在表格中添加类似于启用状态的按钮下面我们一起来看看吧页面代码如下 <el-table-column align="center" label=" ...
Element—UI 表格中换页后序号不变的问题
问题情况:在表格中做出了分页功能后发现分页后的序号还是从1开始解决方法: <el-table-columnlabel="序号"type="index"w ...
element ui 表格中的字太长，想要把多余的字变成...解决方法，一个属性即可
问题描述如下相应代码段 <el-table style="width: 100%" height="330px" :data="tableDa ...
element ui 表格中的渲染有多个状态判断的情况
element中表格的使用模板: <el-table-column label="支付方式" width="100" align="cente ...
Vue+element ui 表格中时间选择器范围控制(两种方式)
1.页面 <el-table v-loading="loading" :data="tableList" border> <!-- 方法1 - ...
《前端》Element ui 表格（Table）组件中前端实现数据分页和模糊查询--未看
我是用的Element ui 表格(Table)组件中的例子下面是别人自己写的方法: Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-CSDN博客 h ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
图片缩小不失真_科技论文中图片的处理方法有哪些?
来源丨斐然智达SCI学术服务有位论文审稿人在自己的博文中写道:"我审稿时看稿件的顺序是题目.摘要.图表. 前言.参考文献和正文".可见论文中图片的质量是非常重要的,图片质量的好坏 ...
图片放大不失真的方法，图无损放大
什么是图片失真?图片失真失真是指图片在传输或者使用处理的过程中导致图片质量下降的现象,这个是电脑使用中常见的现象.有时候我们需要将图片放大处理,普通放大处理后的图片就会失真,变得不模糊,导致图片不能使 ...

Element-ui表格中图片放大简便方法

Element-ui表格中图片放大简便方法相关推荐

最新文章

热门文章