需求:鼠标悬浮,loading加载,查询接口数据

45 阅读1分钟
  1. 效果:标悬浮,loading加载,查询接口数据

image.png

  1. 页面代码: <span title="Editorial Board Member" @mouseenter="fetchEbmInfo(scope.row)" style="position: relative;color: orange; margin-left: 5px;cursor: pointer;" > [EBM]

  2. JS代码:

const tooltipContent = ref('')

const fetchEbmInfo = async (row) => { if (!row.email) { tooltipContent.value = 'No email available' return }

try { tooltipContent.value = 'Loading...' const { data } = await getEbmInfo(row.email) tooltipContent.value = Object.entries(data) .map(([key, val]) => ${key}: ${val}) .join('
') } catch { tooltipContent.value = 'Failed to load data' } }