【实践功能记录6】表格列悬浮展示tooltip信息

2024-06-14 09:20

本文主要是介绍【实践功能记录6】表格列悬浮展示tooltip信息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

需求描述:

鼠标悬浮在表格的IP字段上时,使用tooltip展示IP信息,如图:

1.封装根据IP展示信息的组件

请求接口获取IP信息,注意请求接口时防抖

<!-- 根据IP展示资产信息 -->
<template><div><el-tooltip placement="left" trigger="hover" :show-after="500"><template #content><div v-if="state.ipAssetLoading">loading</div><div v-else><!-- IP信息 --><div><div class="font-bold">{{ t('alertQuery.ipInfo') }}:</div><div>{{ t('alertQuery.ipInfo_ip') }}: {{ state.showIp }}</div><div>{{ t('alertQuery.ipInfo_address') }}: {{ state.showAssetInfo.ipAddressInfo }}</div></div><!-- 资产信息 --><template v-if="!_.isEmpty(state.showAssetInfo.ipAssetInfo)"><el-divider></el-divider><div class="font-bold">{{ t('alertQuery.assetInfo') }}:</div><div v-for="item of state.showAssetInfo.ipAssetInfo" :key="item.key"><div>{{ item.label }}: {{ item.value }}</div></div></template></div></template><el-link type="primary" @mouseenter="initIpAsset(state.ipValue)" :underline="false">{{ state.ipValue }}</el-link></el-tooltip></div>
</template><script setup lang="ts">
import _ from '@lodash';
import { initIpInfoLink } from '@/utils/util';
import { getIpInfo } from '@/api/common';
import type { AssetInfo } from '@/api/common';const { t } = useI18n();
const state = reactive({ipAssetLoading: false,showAssetInfo: {} as AssetInfo,ipValue: '',showIp: '',
});
const props = defineProps<{ rowValue: string }>();watch(() => props.rowValue,() => {state.ipValue = props.rowValue;},{ immediate: true },
);// 获取IP地址及资产信息
const searchInfoDebounce = _.debounce((_ip) => getIpAsset(_ip), 500);
// 获取IP
async function initIpAsset(ip: string) {state.showIp = await initIpInfoLink(ip);searchInfoDebounce(state.showIp);
}
async function getIpAsset(ip: string) {try {state.ipAssetLoading = true;const res = await getIpInfo(ip);if (res?.code) throw new Error(res?.message);state.showAssetInfo.ipAddressInfo = res?.data?.ipAddressInfo ?? '';state.showAssetInfo.ipAssetInfo = res?.data?.ipAssetInfo ?? [];} catch (error) {if (error === 'cancel' || error?.code === RESPONSE_CODE.CANCEL) return;console.log(`[log] - getIpInfo - error:`, error);} finally {state.ipAssetLoading = false;}
}
</script>

获取IP信息的方法

// 获取IP
export async function initIpInfoLink(ip: string) {if (!ip) return '';ip = _.escape(ip);let _ip = ip;// 兼容特殊的这种写法 192.168.2.101(192.168.2.101)if (_ip.includes('(')) {_ip = _ip.substr(0, _ip.indexOf('('));}// IP:端口格式if (_ip.includes(':')) {_ip = _ip.substr(0, _ip.indexOf(':'));}return _ip;
}
2.请求接口的文件

为了防止接口重复请求时请求被中断,在请求接口的时候加上时间Date.now()

// 通用接口
import type { ResDto } from '@/utils/request';// 根据IP查询资产信息
export interface AssetInfo {ipAssetInfo: { label: string; value: string; key: string }[];ipAddressInfo: string;
}
export function getIpInfo(ip: string): ResDto<AssetInfo> {return SecRequest({method: 'POST',url: '/test/alert/ip?time=' + Date.now(),data: { ip },});
}
3.在表格列中调用方法

首先判断表格的字段是否符合IP格式,符合再去调用封装好的组件

<el-table-columnv-for="col of appState.headList":key="col.value":label="col.label":prop="col.value"align="center"><template #default="scope"><!--添加ip悬浮查看信息 --><template v-if="isFieldIP(scope.row[col?.value])"><ShowIpAsset :rowValue="scope.row[col?.value] ?? ''"></ShowIpAsset></template></template>
</el-table-column>// 导入组件
import ShowIpAsset from '@/components/VIpAsset/ShowIpAsset.vue';
// 判断字段内容是否符合IP格式
import { isFieldIP } from '@/utils/validate';

判断是否为IP字段

// 判断是否为IP字段
export function isFieldIP(ip: string) {ip = _.escape(ip);let _ip = ip;if (_ip?.includes(':')) {_ip = _ip.substr(0, _ip.indexOf(':'));}const reg =/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;return reg.test(_ip);
}

这篇关于【实践功能记录6】表格列悬浮展示tooltip信息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1060004

相关文章

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE

MySQL 中 ROW_NUMBER() 函数最佳实践

《MySQL中ROW_NUMBER()函数最佳实践》MySQL中ROW_NUMBER()函数,作为窗口函数为每行分配唯一连续序号,区别于RANK()和DENSE_RANK(),特别适合分页、去重... 目录mysql 中 ROW_NUMBER() 函数详解一、基础语法二、核心特点三、典型应用场景1. 数据分

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

Golang如何用gorm实现分页的功能

《Golang如何用gorm实现分页的功能》:本文主要介绍Golang如何用gorm实现分页的功能方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录背景go库下载初始化数据【1】建表【2】插入数据【3】查看数据4、代码示例【1】gorm结构体定义【2】分页结构体

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)

《k8s上运行的mysql、mariadb数据库的备份记录(支持x86和arm两种架构)》本文记录在K8s上运行的MySQL/MariaDB备份方案,通过工具容器执行mysqldump,结合定时任务实... 目录前言一、获取需要备份的数据库的信息二、备份步骤1.准备工作(X86)1.准备工作(arm)2.手