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

news2024/11/23 23:26:56

我的需求是跳转到第三方网站,看官方是写了如何跳转站内路由,不符合我的要求,在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博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1184295.html

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

相关文章

利用Ansible实现批量Linux服务器安全配置

1.摘要 在上一篇<<初步利用Ansible实现批量服务器自动化管理>>文章中, 我初步实现了通过编写清单和剧本来实现多台服务器的自动化管理,在本章节中, 我将利用Ansible的剧本来实现更实用、更复杂一点的功能, 主要功能包括三个:1.同时在三台服务器中增加IP访问控制,只…

黑洞路由的几种应用场景

第一种在内网中产生环路&#xff1a; 这种核心交换机上肯定写一条默认路由 0.0.0.0 0 10.0.0.1 出口路由要写一条192.168.0.0 16 10.0.0.2 如果出口路由访问一条不存在的内网网段&#xff0c;又或者访问的那台终端停机了&#xff0c;那就会产生三层环路&#xff0c;数据包在…

Linux常用命令——cat命令

在线Linux命令查询工具 cat 连接文件并打印到标准输出设备上 补充说明 cat命令连接文件并打印到标准输出设备上&#xff0c;cat经常用来显示文件的内容&#xff0c;类似于下的type命令。 注意&#xff1a;当文件较大时&#xff0c;文本在屏幕上迅速闪过&#xff08;滚屏&am…

12 tcp协议详解

1、tcp的本性 tcp是一个悲观者&#xff0c;生下来就不信任网络&#xff0c;任务会发生丢包等&#xff0c;所以要从算法层面来保证可靠性。 2、TCP 包头格式 tcp的包头格式比UDP要复杂的多。 1.源端口号和目标端口号是不可少的&#xff0c;这一点和 UDP 是一样的。如果没有…

ICCV 2023|PViC:构建交互谓词视觉上下文,高效提升HOI Transformer检测性能

文章链接&#xff1a;https://arxiv.org/abs/2308.06202 代码仓库&#xff1a;https://github.com/fredzzhang/pvic 在今年的计算机视觉顶会上&#xff0c;基于视觉Transformer&#xff08;ViT&#xff09;的工作仍然占有非常重要的地位。目前最受研究者青睐的&#xff0c;莫过…

JVM Native内存泄露的排查分析(64M 问题)

我们有一个线上的项目&#xff0c;刚启动完就占用了使用 top 命令查看 RES 占用了超过 1.5G&#xff0c;这明显不合理&#xff0c;于是进行了一些分析找到了根本的原因&#xff0c;下面是完整的分析过程&#xff0c;希望对你有所帮助。 会涉及到下面这些内容 Linux 经典的 64M…

2023最新版Android逆向教程——第4天:真机环境的配置

目录 一、安卓逆向设备推荐二、真机环境配置(刷机基础教程)2.1 刷机方式的分类2.2 刷机包的分类2.3 谷歌手机工厂镜像2.4 简单配置2.5 进入 Bootloader 模式2.6 刷机详解 二、真机环境配置(root)三、真机环境配置(其他)3.1 调整时间3.2 关闭 wifi 信号上的3.3 停用设置向导 安卓…

HBase基础编程

文章目录 HBase基础编程一、实验目标二、实验要求及注意事项三、实验内容及步骤 附&#xff1a;系列文章 HBase基础编程 一、实验目标 掌握如何通过HBase shell命令来设计HBase表结构实例&#xff0c;从而理解HBase的列式存储结构掌 握 java编程创建HBase表和删除HBase表。 …

新能源汽车高压线束是如何快速连接到测试设备上进行电性能测试的

快速连接形成稳定的电测试在新能源行业里面是很常见的测试场景&#xff0c;比如说在新能源汽车行业的电池包、电机、电控制器的电性能测试中会有很多高压线束&#xff0c;需要将这些线束和电池包、电控制器、电机与测试设备快速连接在一起进行相关的EOL/DCR测试。 新能源汽车高…

内网隧道搭建( 内网穿透)

一、使用代理工具 ew_for_win 1、环境准备&#xff1a; &#xff08;1&#xff09;一台双网卡虚拟机&#xff08;作为跳板&#xff09;&#xff0c;能同时与攻击者主机和受害者主机通信&#xff1a; &#xff08;2&#xff09;一台攻击者主机&#xff1a; &#xff08;3&…

【陈老板赠书活动 - 17期】- 她以亲身经历证明,程序员借助AI做副业可以有多成功!

陈老老老板&#x1f9b8; &#x1f468;‍&#x1f4bb;本文专栏&#xff1a;赠书活动专栏&#xff08;为大家争取的福利&#xff0c;免费送书&#xff09; &#x1f468;‍&#x1f4bb;本文简述&#xff1a;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f468;‍&am…

最新Next14 路由处理器 Route Handlers

四、使用Next路由处理程序 Next.js Route Handlers I. Next中路由处理程序是什么 ​ 路由处理程序是在用户访问站点路由时执行的功能。它们负责处理对定义的URL或路由的传入HTTP请求&#xff0c;以生成所需的数据。从本质上讲&#xff0c;当用户访问Next.js应用程序中的特定页…

全新智能后备保护器综合产品解决方案

SCB后备保护器是一种用于浪涌保护器&#xff08;SPD&#xff09;的专用外置脱离器&#xff0c;它可以有效地防止SPD因故障或短路而引起的火灾和设备损坏&#xff0c;同时保证SPD在雷电流冲击下不误动作&#xff0c;维持电气设备的防雷保护状态。地凯科技将介绍后备保护器的应用…

pycharm remote host显示nothing to show

远程服务器remote host右侧消失解决方法_dl_风禾的博客-CSDN博客文章浏览阅读727次。remote host打开方法https://blog.csdn.net/weixin_43959436/article/details/127818707?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169940685316800197099235%2522%252C%252…

软件开发项目文档系列之十三如何撰写用户操作手册

目录 1 引言1.1 目的1.2 系统概述1.3 参考资料1.4 文档格式 2 系统运行环境2.1 系统硬件环境2.2 系统软件环境 3 系统设置说明3.1 公告发布3.2 角色管理3.3 通用管理 4 用户账户与访问说明4.1 注册与登录4.2 密码管理 5 数据管理说明5.1 数据导入与导出5.2 数据备份与还原 6 帮…

二维码智慧门牌管理系统升级解决方案:高效、安全、便捷

文章目录 前言一、用户管理二、菜单管理三、角色管理四、字典管理五、权限管理六、日志管理 前言 随着科技的不断发展&#xff0c;传统门牌管理系统已经无法满足现代管理的需求。为了提高管理效率&#xff0c;降低安全风险&#xff0c;并实现便捷的日志管理&#xff0c;二维码…

JAVA综合知识点总结-基础篇(4)

三十一、平时浏览的书籍..................................................................................... 三十二、java Exception体系结构......................................................................... 三十三、session和cookie的区别...........…

小白学爬虫:通过商品ID或商品链接封装接口获取淘宝商品销量数据接口|淘宝商品销量接口|淘宝月销量接口|淘宝总销量接口

淘宝商品销量接口是淘宝开放平台提供的一种API接口&#xff0c;通过该接口&#xff0c;商家可以获取到淘宝平台上的商品销量数据。使用淘宝商品销量接口的步骤如下&#xff1a; 1、在淘宝开放平台注册并创建应用&#xff0c;获取API Key和Secret Key等必要的信息。 2、根据淘宝…

可完美兼容迪文的串口屏?

如何让屏幕识别迪文协议&#xff0c;下面介绍淘晶驰USART HMI上位机用法 首先在工程输入0000-fffe 然后在program.s输入recmod2&#xff0c;在控件列表里就会刷新带有_vp的控件 带_vp的控件可以像迪文一样使用地址 导入字库&#xff0c;输入项目地址&#xff0c;根据通信协议来…

舞台灯光专用电机驱动及应用方案

舞台灯光的运用是舞台艺术中不可或缺的重要手段&#xff0c;达到突出重点、塑造人物形象、烘托环境气氛的目的&#xff1b;在舞台灯光的使用过程中&#xff0c;会对灯光的角度有较多的要求而步进电机具有较好的调节性&#xff1b;且控制方式更加灵活多样&#xff1b;能满足舞台…