element 表格显示图片

先上需求，后台会返回1-9张不等的图片，需要显示在列表页面，一张的时候，就显示大图，超过一张就按照九宫格显示，大概长这样

不多BB，直接上代码

// html
<el-table-column prop="commentUrl" label="评论图片" width="195"><template slot-scope="scope"><div class="wrap" :class="{'moreImg':scope.row.commentUrl.length > 1}" ><el-image v-for="(item , index) in scope.row.commentUrl" :key="index" :src="item.url" :fit="fit"></el-image></div></template>
</el-table-column>

// css样式
.wrap {img {width: 100%;height: 100%;}}/deep/ .moreImg{display: flex;flex-wrap: wrap;.el-image{width: 50px;height: 50px;margin-right: 5px;margin-top: 5px;}}

commentUrl 是一个数组，当数组里面的长度大于1的时候，就意味着不止一张图片，就需要变成九宫格的样式，只需要限制表格的宽度就可以了，我在html里面限制了宽度为195，然后在css写两套样式，class是wrap的时候，是一张图片的样式，为moreImg的时候，就是多张图片的样式了

element 表格显示图片相关推荐

vue表格显示图片，采用element ui实现
项目场景: vue表格显示图片,采用element ui实现 <template><el-table :data="tableData" style=" ...
element表格重新布局，element表格显示不全，doLayout
element表格重新布局,element表格显示不全,doLayout 问题: 解决办法 Table 的 doLayout 方法,用于重新计算 Table 的布局问题: 1.element tab ...
QTableWidget中表格显示图片
QTableWidget中的表格显示图片有几种方式: 需要先将图片加载为资源. 1.直接在创建QTableWidgetItem的时候创建,如 tableWdiget->setItem(0,1,n ...
iView表格显示图片和文字过长显示省略号，并且Tooltip提示
iView表格显示图片和文字过长显示省略号,并且Tooltip提示效果图代码 {title: 'LOGO',key: 'logo',align: "center",render ...
element中图片加载失败
element引入图片使用el-image 引入图片运行却出现加载失败看了好多次官网,确认无误,最后网上查了好久,发现引入的时候要在后面加一个require 最后才成功! require明明是引入 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
element表格图片放大_图片在表格中,鼠标经过图片上方，图片有放大预览效果（vue+element ）...
element的鼠标移到图片时,放大预览效果.实现思路:element的 el-table + el-popover export default { data () { return { tabDa ...
class vue 添加图片_vue+element 添加图片组件
添加图片效果图微信截图_20200630144419.png 微信截图_20200630144532.png 由于该组件在页面中使用位置广泛,一但在dialog中使用便会发生错误,故未添加预览功能 ...

element 表格显示图片

element 表格显示图片相关推荐

最新文章

热门文章