【实践功能记录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

相关文章

MySQL 迁移至 Doris 最佳实践方案(最新整理)

《MySQL迁移至Doris最佳实践方案(最新整理)》本文将深入剖析三种经过实践验证的MySQL迁移至Doris的最佳方案,涵盖全量迁移、增量同步、混合迁移以及基于CDC(ChangeData... 目录一、China编程JDBC Catalog 联邦查询方案(适合跨库实时查询)1. 方案概述2. 环境要求3.

Linux进程CPU绑定优化与实践过程

《Linux进程CPU绑定优化与实践过程》Linux支持进程绑定至特定CPU核心,通过sched_setaffinity系统调用和taskset工具实现,优化缓存效率与上下文切换,提升多核计算性能,适... 目录1. 多核处理器及并行计算概念1.1 多核处理器架构概述1.2 并行计算的含义及重要性1.3 并

全面掌握 SQL 中的 DATEDIFF函数及用法最佳实践

《全面掌握SQL中的DATEDIFF函数及用法最佳实践》本文解析DATEDIFF在不同数据库中的差异,强调其边界计算原理,探讨应用场景及陷阱,推荐根据需求选择TIMESTAMPDIFF或inte... 目录1. 核心概念:DATEDIFF 究竟在计算什么?2. 主流数据库中的 DATEDIFF 实现2.1

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

Qt使用QSqlDatabase连接MySQL实现增删改查功能

《Qt使用QSqlDatabase连接MySQL实现增删改查功能》这篇文章主要为大家详细介绍了Qt如何使用QSqlDatabase连接MySQL实现增删改查功能,文中的示例代码讲解详细,感兴趣的小伙伴... 目录一、创建数据表二、连接mysql数据库三、封装成一个完整的轻量级 ORM 风格类3.1 表结构

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依

MyBatis-Plus 中 nested() 与 and() 方法详解(最佳实践场景)

《MyBatis-Plus中nested()与and()方法详解(最佳实践场景)》在MyBatis-Plus的条件构造器中,nested()和and()都是用于构建复杂查询条件的关键方法,但... 目录MyBATis-Plus 中nested()与and()方法详解一、核心区别对比二、方法详解1.and()

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.