ElementUI表格中显示图片,悬浮显示放大图片

在这里插入图片描述

使用弹出框  

核心:

<el-popover placement="top-start" title="" trigger="hover">
                    <img :src="item" alt="" style="width: 100%;height: 100%">
                    <img slot="reference" :src="item" >
                  </el-popover>

<el-table-column
    prop="carImg"
    label="车辆图片">
    <template slot-scope="scope">
        <el-popover
              placement="right"
              :title="scope.row.carId + pictureTitle"
              trigger="hover">
            <img :src="huaWeiUrl+scope.row.carImg"/>
            <img slot="reference" :src="huaWeiUrl+scope.row.carImg"  style="max-height: 50px;max-width: 150px">
        </el-popover>
    </template>
</el-table-column>
  •  
//本人华为云服务器图片地址,
huaWeiUrl:'https://leitianquan.obs.cn-north-4.myhuaweicloud.com/',
//放大图片标题
pictureTitle:'号车辆'
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Element UI,要实现表格超出部分内容的显示,可以使用表格列组件的`:show-overflow-tooltip='true'`属性。这个属性可以将过长的部分内容隐藏起来,并且在鼠标悬停在内容上面时,以悬浮框的形式将所有数据显示出来。具体的代码如下所示: ```html <el-table-column label="DeviceId" prop="deviceId" :show-overflow-tooltip='true'></el-table-column> ``` 在这个代码,我们给表格列组件添加了`:show-overflow-tooltip='true'`属性,这样当表格内容超出列宽时,会隐藏超出部分的内容。当鼠标悬停在内容上面时,会以悬浮框的形式将所有数据显示出来,以便用户查看完整的内容。这样可以使表格在超出部分内容时能够更好地展示数据,并提供更好的用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法](https://download.csdn.net/download/weixin_38593701/13982200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue:element-ui表格过长内容隐藏显示](https://blog.csdn.net/sssxlxwbwz/article/details/126323112)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值