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

iview实现table里面每行数据的跳转

我的需求是跳转到第三方网站,看官方是写了如何跳转站内路由,不符合我的要求,在csdn发现了一篇文章,我贴一下代码

 

<template><Table border :columns="ReportColumns" :data="ReportData"><template #name="{ row }"><strong>{{ row.name }}</strong></template><template #action="{ row, index }"><!--                                        <a href="http://wwww.baidu.com/" target="_blank">view</a>-->
<!--                                        <Button type="primary" size="small" style="margin-right: 5px"  target="_blank" >View</Button>--><Button type="error" size="small" @click="remove(index)">Delete</Button></template></Table></template>
 data(){return{ReportColumns:[{title: '生成时间',key: 'createTime',width: 220},{title: '生成用户',key: 'creator',width: 200},{title:'报告地址',key:'reportUrl',width: 800,render: (h, params) => {return h('span',{domProps: {innerHTML: "<a href='" + params.row.reportUrl + "' target='_blank'>" + params.row.reportUrl + '</a>'}})}},{title: '操作',slot: 'action',}],

后端接口报文格式

{"ret": true,"code": 0,"msg": "查询成功","content": [{"id": 522,"reportId": 2561,"creator": "李朝阳","createTime": "2023-11-03 12:05:00","reportUrl":"http://192.168.0.1:1111/view/project/5f1e8e97b6e123455555" },{"id": 523,"reportId": 2562,"creator": "白克玲","createTime": "2023-10-03 11:25:00","reportUrl":"https://blog.csdn.net/qq_42772400/article/details/128386185"}]
}

原贴地址

iview table实现通过render实现点击跳转到相应的网址_iview页面跳转-CSDN博客

相关文章:

iview实现table里面每行数据的跳转

我的需求是跳转到第三方网站&#xff0c;看官方是写了如何跳转站内路由&#xff0c;不符合我的要求&#xff0c;在csdn发现了一篇文章&#xff0c;我贴一下代码 <template><Table border :columns"ReportColumns" :data"ReportData"><templ…...

Docker快速搭建Drupal内容管理系统并远程访问

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525;个人专栏:《Linux深造日志》《C干货基地》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言1. Docker安装Drupal2. 本地局域网访问3 . Linux 安装cpolar4. 配置Drupal公网访问地址5. 公网远程访问Drupal…...

Ansible优化大全

文章目录 一、关闭系统信息收集二、开启加速 Ansible 执行速度修改配置文件/etc/ansible/ansible.cfg由于该功能与sudo冲突&#xff0c;必须关闭 requiretty 选项方法一方法二 参考文章&#xff1a; https://blog.csdn.net/o0o0o0D/article/details/110998873 一、关闭系统信息…...

Python|OpenCV-图像的添加和混合操作(8)

前言 本文是该专栏的第8篇,后面将持续分享OpenCV计算机视觉的干货知识,记得关注。 在使用OpenCV库对图像操作的时候,有时需要对图像进行运算操作,类似于加法,减法,位操作等处理。而本文,笔者将针对OpenCV对图像的添加,混合以及位操作进行详细的介绍说明和使用。 下面,…...

Vue3+vite+cesium环境搭建

引言 目前有不少vue3cesium的配置教学&#xff0c;存在以下两个问题&#xff1a; &#xff08;1&#xff09;vue3cli方式&#xff0c;随着项目的迭代&#xff0c;npm run serve 启动调试很慢&#xff1b; &#xff08;2&#xff09;vue3vite 确实能将调试启动提升不少的&…...

metaObjecthandler 的基本理解与使用(自动插入更新人和创建人)

metaObjecthandler 的基本理解与使用(自动插入更新人和创建人) mysql 自动插入更新和修改时间 更新字段信息 ALTER TABLE test MODIFY create_date timestamp not null default CURRENT_TIMESTAMP; ALTER TABLE test MODIFY update_date timestamp not null default CURRE…...

SpringBoot与ES7实现多条件搜索

SpringBoot与ES7实现多条件搜索 利用Kibana内置的航班数据&#xff0c;查询从威尼斯到中国按票价升序排列的前10条航班数据。 第一步&#xff0c;新建SpringBoot功能&#xff0c;pom.xml引入四个依赖。 <dependency><groupId>org.elasticsearch.client</groupI…...

【排序算法】 快速排序(快排)!图解+实现详解!

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; 算法—排序篇 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️快速排序的概念☁️快速排序的由来☁️快速排序的思想☁️快速排序的实…...

急招开发、安全工程师实习生

信息安全工程师-实习生 公司&#xff1a;四川久远银海软件股份有限公司 工作职责 1、负责对公司WEB应用、APP、小程序、公众号等产品进行安全渗透测试&#xff1b; 2、负责对参与攻防演练、护网行动的项目组提供安全技术支撑&#xff1b; 3、负责提供基线核查、风险评估、主…...

数据结构与算法—插入排序选择排序

目录 一、排序的概念 二、插入排序 1、直接插入排序 直接插入排序的特性总结&#xff1a; 2、希尔排序 希尔排序的特性总结&#xff1a; 三、选择排序 1、直接选择排序 时间复杂度 2、堆排序—排升序(建大堆) 向下调整函数 堆排序函数 代码完整版&#xff1a; …...

基于词云图的短信热词数据可视化

热词统计&#xff1a;短信、邮件、微信、QQ、微博、电商评价、新闻、各行业热词&#xff08;旅游、世界杯、战争、考研等&#xff09;、热点事件等场景。 展示模型&#xff1a;给定多段文本&#xff0c;绘制出词云图。 核心思想&#xff1a;根据样本集中的文本包含的高频词…...

Linux/centos上如何配置管理Web服务器?

Linux/centos上如何配置管理Web服务器&#xff1f; 1 Web简单了解2 关于Apache3 如何安装Apache服务器&#xff1f;3.1 Apache服务安装3.2 httpd服务的基本操作 4 如何配置Apache服务器&#xff1f;4.1 关于httpd.conf配置4.2 常用指令 5 简单实例 1 Web简单了解 Web服务器称为…...

Java EE进阶2

包如果下载不下来怎么办? 1,确认包是否存在 2.如果包存在就多下载几次 3.如果下载了很多次都下载不下来,看看是不是下面几步出现了问题? 1)是否配置了国内源 settings.xml 2)目录是否为全英文,存在中文的话就修改路径 3)删除本地仓库的 jar 包,重新下载(可能由于网络的原…...

最新AI系统ChatGPT源码+AI绘画系统源码+支持GPT4.0+Midjourney绘画+搭建部署教程+附源码

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…...

大厂面试题-为什么一线互联网公司严禁使用存储过程

之所以互联网公司不让用&#xff0c;主要有几个方面的原因&#xff1a; 1.存储过程不好调试&#xff0c;一旦涉及到非常复杂的逻辑&#xff0c;定位问题的时候比较麻烦 2.存储过程的一致性很差&#xff0c;如果从Oracle迁移到MySQL&#xff0c;涉及到部分数据库独有特性的时候…...

SpringBoot+Swagger详细使用方法

一、接口文档概述 swagger是当下比较流行的实时接口文文档生成工具。接口文档是当前前后端分离项目中必不可少的工具&#xff0c;在前后端开发之前&#xff0c;后端要先出接口文档&#xff0c;前端根据接口文档来进行项目的开发&#xff0c;双方开发结束后在进行联调测试。 二…...

[动态规划] (十二) 简单多状态 LeetCode 213.打家劫舍II

[动态规划] (十二) 简单多状态: LeetCode 213.打家劫舍II 文章目录 [动态规划] (十二) 简单多状态: LeetCode 213.打家劫舍II题目解析解题思路状态表示状态转移方程初始化和填表顺序返回值提醒 代码实现总结 213. 打家劫舍 II 题目解析 本题是对打家劫舍和按摩师的升级题型&am…...

算法与数据结构之链表

链表的定义&#xff0c;相信大家都知道&#xff0c;这里就不赘述了只是链表分单向链表和双向链表&#xff0c;废话不多说&#xff0c;直接上代码 链表节点的定义&#xff1a; public class Node {int val;Node next;Node pre;public Node(int val, Node next, Node pre) {thi…...

深入剖析React Hooks中的 useCallback

前言 自 React 16.8 版本引入 Hooks 以来&#xff0c;useCallback 成为了前端开发者们越来越青睐的一个功能。useCallback 可以有效优化组件性能&#xff0c;尤其在处理函数式组件中的状态更新时。本文将详细介绍 useCallback 的用法及其注意事项。 1. useCallback 简介 use…...

微服务中配置文件(YAML文件)和项目依赖(POM文件)的区别与联系

实际上涉及到了微服务架构中的两个重要概念&#xff1a;服务间通信和项目依赖管理。在微服务架构中&#xff0c;一个项目可以通过两种方式与另一个项目建立依赖关系&#xff1a;通过配置文件&#xff08;如YAML文件&#xff09;和通过项目依赖&#xff08;如POM文件&#xff09…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...