当前位置: 首页 > news >正文

vue el-table使用、el-popover关闭、el-image大图预览

1、html

<el-table :data="list" :header-cell-style="{ background: '#F7F8F9' }"><el-table-column type="index" width="100px" label="序号"></el-table-column><el-table-column prop="pic" label="图片" width="100"><template #default="{ row }"><img :src="picUrl + row.img" alt=""></template></el-table-column><el-table-columnv-for="(columnInfo, columnIndex) in tableColumn":key="columnIndex":prop="columnInfo.code":label="columnInfo.label":width="columnInfo.width || 'auto'"><template slot-scope="scope">{{ scope.row[columnInfo.code] || '-' }}</template></el-table-column><el-table-column prop="postInfo" label="运单" align="center" ><template slot-scope="scope"><span v-html="scope.row.postInfo"></span></template></el-table-column><el-table-column v-if="order.orderStatus === '已付款'" prop="operation" label="操作" align="center" width="100"><template slot-scope="scope"><!-- trigger="hover"  --><el-popover v-show="!scope.row.postNum" ref="popoverRef" placement="bottom"><!-- 这里是弹窗弹出来的样式(start)-------><div class="pop"></div><!-- 这里是弹窗弹出来的样式(end)-------><div slot="reference"><!-- 这里是触发弹窗弹出来的样式(start)-------><div class="item-edit"></div><!-- 这里是触发弹窗弹出来的样式(start)-------></div></el-popover></template></el-table-column>
</el-table>             

tableColum 格式

export const tableColum = [ {label: '姓名',code: 'name',type: 'normal',width: '55',},{label: '手机号',code: 'tel',type: 'template',},
]

2、关闭popover

this.$refs.popover.doClose()

3、el-image 图片大图预览-详解

el-image
el-image-view

http://www.lryc.cn/news/361562.html

相关文章:

  • 星网智云总经理韦炜:低代码与智能制造融合,探索未来制造的无限可能
  • 3d模型批量渲图总是会跳怎么办?---模大狮模型网
  • 【距离四六级只剩一个星期!】刘晓艳四级保命班课程笔记(2)(可分享治资料~)
  • Java之Enum枚举类实践
  • Apache POI对Excel进行读写操作
  • 网络安全中攻击溯源方法
  • 软件设计不是CRUD(21):在流式数据处理系统中进行业务抽象落地——需求分析
  • 远控免杀篇
  • 基于单片机的超声波倒车雷达设计
  • 如何增加服务器的高并发
  • webservice、WCF、webAPI权限认证
  • Kafka之Producer原理
  • ubuntu20.04部署gitlab流程
  • C/C++动态内存管理(new与delete)
  • 搭建一个基于主流技术Spring Boot 2 + Vue 3 + Ant Design Vue的技术框架的简要步骤
  • 水电站生产指挥调度系统方案
  • 深度学习入门-第3章-神经网络
  • 如何使用AES128位进行视频解密
  • ArkTS是前端语言吗
  • git上新down下来的项目,前端启动报错npm ERR! code 1 npm ERR! path E:\code\vuehr\node_modul
  • oc中的数据结构在都在什么位置
  • 多云世界中的 API 治理
  • 【稳定检索/投稿优惠】2024年环境、资源与区域经济发展国际会议(ERRED 2024)
  • 生成式 AI——ChatGPT、Dall-E、Midjourney 等算法理念探讨
  • C-数据结构-树状存储基本概念
  • 【Linux-Yocto】
  • 一文掌握JavaScript 中类的用法
  • 国密算法:信息安全的守护者
  • 产品经理瞎扯:餐饮门店怎么做好服务实现自救
  • 字节裁员!开启裁员新模式。。