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.mzph.cn/news/844902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

socks5 如何让dns不被污染

问题 发现firefox浏览器代理设置成socks5后&#xff0c;查看ip是成功了&#xff0c;但是谷歌等海外的还是无法正常访问。 原因 主要原因是socks5连接虽然是成功了&#xff0c;但是dns还是走国内的&#xff0c;国内的dns解析都被污染了导致没法正常访问 解决 把设置里的 使…

图数据集的加载

原文参考官方文档&#xff1a; https://pytorch-geometric.readthedocs.io/en/latest/modules/loader.html torch_geometric.loader 库中&#xff0c; 该库中包含了多种 图数据集的 加载方式&#xff0c; 这里主要介绍 DenseDataLoader and DataLoader 这两者之间的区别&#…

LeetCode 每日一题 数学篇 2894.分类求和并作差

给你两个正整数 n 和 m 。 现定义两个整数 num1 和 num2 &#xff0c;如下所示&#xff1a; num1&#xff1a;范围 [1, n] 内所有 无法被 m 整除 的整数之和。num2&#xff1a;范围 [1, n] 内所有 能够被 m 整除 的整数之和。 返回整数 num1 - num2 。 int differenceOfSum…

每日一题——力扣141. 环形链表(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 专业点评 时间复杂度分析 空间复杂度分析 总结 我要更强 方法2&#x…

【开发日记】ElementUI表单使用原生@submit提交表单数据

使用submit.native.prevent为el-form设置提交方法。 使用native-type为el-button设置原生按钮类型。 示例如下&#xff1a; <el-form class"search" submit.native.prevent"submitSearch"><div classsearch-item>人员ID :<el-input sizemi…

概率论与数理统计,重要知识点——全部公式总结

二、一维随机变量及其分布 五个分布参考另外一篇文章 四、随机变量的数字特征 大数定理以及中心极限定理 六、数理统计

QT事件----QPaintEvent绘图事件,QwheelEvent鼠标滚轮事件等; 用事件自定义按键;QT事件过滤器。

一、QT事件 1.1 QPaintEvent绘图事件 QPaintEvent 是 Qt 框架中一个重要的事件类,专门用于处理绘图事件。当 Qt 视图组件需要重绘自己的一部分时,就会产生 QPaintEvent 事件。这通常发生在以下几种情况:1. 窗口第一次显示时:当窗口或控件第一次出现在屏幕上时,系统会生成…

WSDM2024推荐系统和LLM相关论文整理(二)

WSDM 2024接收的论文已经公布&#xff0c;全部收录的论文可前往地址 网址&#xff1a;https://www.wsdm-conference.org/2024/accepted-papers/ 其中推荐系统相关论文三十余篇&#xff0c;下文列举了部分论文的标题以及摘要&#xff0c;更多内容欢迎关注公众号【深度学习推荐算…

RabbitMQ简单使用方法,以异步处理日志为例:

在RabbitMQ中异步记录日志的实现可以分为生产者将日志消息发送到队列&#xff0c;以及消费者从队列中取出消息并记录日志。当搭建好消息队列后&#xff0c;需要确保消费者持续运行&#xff0c;以便随时处理新进入的日志消息。 步骤一&#xff1a;设置生产者发送日志消息到Rabb…

vscode操作git详解

基于 VScode 的 git 详细使用指南【保姆级&#xff01;建议收藏&#xff01;】_vscode git-CSDN博客

Stable Diffusion AI绘画:从创意词汇到艺术图画的魔法之旅

文章目录 一、Stable Diffusion的工作原理二、从提示词到模型出图的过程三、Stable Diffusion在艺术创作中的应用《Stable Diffusion AI绘画从提示词到模型出图》内容简介作者简介楚天 目录前言/序言本书特色特别提示 获取方式 在科技的飞速发展中&#xff0c;Stable Diffusion…

Java-----Comparable接口和Comparator接口

在Java中&#xff0c;我们会经常使用到自定义类&#xff0c;那我们如何进行自定义类的比较呢? 1.Comparable接口 普通数据的比较 int a10;int b91;System.out.println(a<b); 那自定义类型可不可以这样比较呢&#xff1f;看一下代码 我们发现会报错&#xff0c;因为自定义…

策略模式结合Spring使用

1.抽象策略 /*** 支付方式策略* author Linging* version 1.0.0* since 1.0*/ public interface PayStrategy {void pay(BigDecimal money);}2.具体策略 /*** 支付宝* author Linging* version 1.0.0* since 1.0*/ Component("aliPayStrategy") public class AliPa…

uniapp手机屏幕左滑返回上一页支持APP,H5

核心&#xff1a;touchstart"touchStart" touchend"touchEnd" 代码示例&#xff1a; <template><view class"payPasswordSetting" touchstart"touchStart" touchend"touchEnd"></view> </template&g…

LNMP分布式搭建

一、准备三台主机 192.168.100.11 mysql 192.168.100.12 nginx 192.168.100.13 php 二、关闭防火墙及安全策略 systemctl stop firewalld setenforce 0 三、安装nginx&#xff08;192.168.100.11&#xff09; 1、添加nginx源 vim /etc/yum.repos.d/ng…

618必备好物选购清单有哪些?五款精品好物分享

618将近&#xff0c;很多好物都会在这段时间搞活动&#xff0c;许多朋友会在这个时候置办或者置换家居&#xff0c;那么&#xff0c;2024年的618有哪些值得入手的好物呢&#xff1f;今天&#xff0c;将与大家分享一些精选好物&#xff0c;这些好物在618入手绝对是个不错的选择。…

Unity中模拟生成正态分布的一种方式

using System; using System.Collections; using System.Collections.Generic; using Unity.Mathematics; using UnityEngine;public class MathFunction : MonoBehaviour {private void Start(){//key 范围 0-99 表示 0% 到 99%Dictionary<int,uint> m new Dictionary&…

路径规划中的曲线插值

路径规划中的曲线插值是一种数学方法&#xff0c;它通过一系列离散的点生成一条平滑的曲线&#xff0c;这条曲线可以用于机器人导航、自动车辆驾驶、动画制作等领域。以下是一些常见的曲线插值方法&#xff1a; 线性插值&#xff1a; 线性插值是最简单的插值方法&#xff0c;它…

Leetcode:无重复字符的最长子串

普通版本&#xff08;哈希表 滑动窗口&#xff09; 题目链接&#xff1a;3. 无重复字符的最长子串 - 力扣&#xff08;LeetCode&#xff09; //方法一&#xff1a; class Solution { public:int lengthOfLongestSubstring(string s) {unordered_map<char,int> st;int …

【Linux】文件系统和软硬链接

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…