vue element ui el-table单元格里面显示多张图片点击并放大

这篇具有很好参考价值的文章主要介绍了vue element ui el-table单元格里面显示多张图片点击并放大。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

vue在表格中显示图片,Element UI,vue.js,javascript,elementui

一个单元格里面显示三张图片,并且点击图片可以放大。

1.将图片v-for渲染出来,具体上代码

 <el-table-column label="发布图片" align="center" prop="postImages" width="400px">
        <template slot-scope="scope" >
          <span v-for="(item2,index2) in scope.row.postImages" >
            <el-popover
              placement="right"
              width="400"
              trigger="click">
               <img  :src="item2" width="400px" height="400px" >
            <img  slot="reference" :src="item2" width="100px" height="100px" >
          </el-popover>
       <!--    这个是实现点击图片放大功能的代码-->
          </span>
        </template>
</el-table-column>

注:el-popover的属性 

vue在表格中显示图片,Element UI,vue.js,javascript,elementui

 2.单元格里能够展示多张图片,需要在请求的接口里面做处理

getList() {
      this.loading = true;
      listPosts(this.queryParams).then(response => {
        this.total = response.total;
        for(let index in response.rows){
          response.rows[index].postImages=response.rows[index].postImages.split(',')//后端返回的是以,分隔的字符串,将其转化成字符串数组。
        }
        this.postsList = response.rows;
        this.loading = false;
      });
    },

以上两步,就可以实现上面的功能。文章来源地址https://www.toymoban.com/news/detail-730139.html

到了这里,关于vue element ui el-table单元格里面显示多张图片点击并放大的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue中数据滚动显示 实现Element-UI中el-table内数据的懒加载

    工作中我们经常会用到element-ui组件库中的le-table组件来展示数据,但当table的数据源数量过大的时候统一展示可能会出现页面卡顿,且会影响用户体验,为此我们可以尝试对el-table中的数据做懒加载的效果展示: 1. 挂在阶段监听el-table的scroll滚动事件 2. 当table表格滚动条的位置

    2023年04月08日
    浏览(57)
  • Vue2.0+Element-ui(2.15.13)出现el-table不显示问题解决方案

    遇到的问题: Element-ui中的 el-table组件 无法正常显示; 1.安装的Vue是2.0版本; 2.安装的Element-ui是2.15.13版本 原因: 1.一个项目调用了element-ui和vant两个ui库,有冲突; 2.Element-ui是2.15.13版本依赖比较高;   解决方案: 1.npm uninstall element-ui;下载Element-ui 2.npm install element-ui@2.8.3

    2024年02月11日
    浏览(56)
  • element ui - el-table给单元格添加点击事件

    el-table中,点击版本号触发查看配置功能,但是产品想将热区扩大,从点击版本号扩大到点击整个单元格都可以查看。 在 el-table-column 中的 template 标签里,添加一个 div元素 包裹版本号和el-tag,将点击事件绑定在div元素上 :

    2024年02月12日
    浏览(44)
  • element-ui中的el-table合并单元格

    在写项目的时候有时候会经常遇到把行和列合并起来的情况,因为有些数据是重复渲染的,不合并行列会使表格看起来非常的混乱,如下:  而我们想要的数据是下面这种情况,将重复的行进行合并,使表格看起来简单明了,如下:   1:html部分 所谓的合并行就是将多行相同

    2024年02月10日
    浏览(43)
  • element ui修改el-table表格单元格边框颜色

    element-ui官网 第一步:设置除表头单元格边框样式 :cell-style=“{borderColor:‘#01e3ed’}” 第二步:设置表头单元格边框样式 :header-cell-style=“{borderColor:#01e3ed}” 第三步:单独给表格加样式 加个类名class=“exporttable” 第四步:功能实现 -点赞 + 收藏!你是最美的!

    2024年02月14日
    浏览(35)
  • element-ui el-table 如何实现合并单元格

    el-table的组件的可以合并单元格,先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。 比如:代码中定义:span-method=\\\"objectSpanMethod\\\" objectSpanMethod实现是在方法区,具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删

    2024年02月03日
    浏览(48)
  • element ui 中在el-table内,当内容超过多少行时,显示el-tooltip

    最近来了一个需求,在一个el-table里边的某一列渲染一个 ‘介绍’ 的内容,由于内容过多,全部展示显示的不是很美观,所以就给定了个需求让超出两行后显示省略号,并在鼠标移上去之后显示全部内容。 我首先想到的就是使用el-tooltip来实现,但是在使用过程中试了很多方

    2024年02月03日
    浏览(47)
  • Element-UI el-table高度不固定,自适应高度显示滚动条

    表格内容过多时显示滚动条:可通过 max-height设置一个固定的数值高度实现,但是项目中的需求是表格的高度不能写死,要自适应高度来显示滚动

    2024年02月11日
    浏览(59)
  • 【Vue/element】 el-table实现表格动态新增/插入/删除 表格行,可编辑单元格

    效果如下: 点击“新增一行”可以在表格最后新增一行,单元格内容可编辑 点击绿色+按钮,可在指定行的后面插入一行 点击红色-按钮,可以删除指定行 原理:表格 el-table 是通过动态循环 tableData 生成,只要对 tableData 数组进行增加删除元素,就可以达到效果 这里用了ele

    2024年02月16日
    浏览(63)
  • vue(element ui )el-table树形表格展示及数据对齐

    注意点: el-table配置里 row-key 必须是唯一性 :tree-props=“{ children: ‘relatedPartyChild’ , hasChildren: ‘hasChildren’ }” children配置为后端返回的节点字段即可

    2024年02月16日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包