[BUG] Tooltip 在 Vue3.5 的bug

[nuagecen]

Basic Info

• Package Name And Version: @arco-design/[email protected]
• Framework version: Vue3.5.13
• Browser: chrome131.0.0.0

<script setup>
import { reactive } from 'vue';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Salary',
    dataIndex: 'salary',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: 'Email',
    dataIndex: 'email',
  },
];

const data = reactive([{
      key: '1',
      name: 'Jane Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: '[email protected]'
    }, {
      key: '2',
      name: 'Alisa Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: '[email protected]'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: '[email protected]'
    }, {
      key: '4',
      name: 'Ed Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: '[email protected]'
    }, {
      key: '5',
      name: 'William Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: '[email protected]'
    }]);
</script>

<template>
  <a-table :columns="columns" :data="data">
    <template #columns>
      <a-table-column title="Name">
        <template #cell="{ record }">
          {{ record.name }}
          <a-tooltip content="This is tooltip content">
            <span>[hover]</span>
          </a-tooltip>
        </template>
      </a-table-column>
    </template>
  </a-table>
</template>

升级到Vue3.5的版本后，table 里面使用 tooltip。会导致每次hover时，tooltip展示的内容都跑到最后一个去。

• tooltip 里面如果是一个组件就不会，如果是一个原生标签，比如 div, p, span 等等，就不会出现 BUG

<template>
  <a-table :columns="columns" :data="data">
    <template #columns>
      <a-table-column title="Name">
        <template #cell="{ record }">
          {{ record.name }}
          <a-tooltip content="This is tooltip content">
            <!-- 这里是一个 button 组件 -->
            <a-button>[hover]</a-button>
          </a-tooltip>
        </template>
      </a-table-column>
    </template>
  </a-table>
</template>

• 如果把 tooltip 的 content 改为 slot 的方式写入，也不会出现BUG

<template>
  <a-table :columns="columns" :data="data">
    <template #columns>
      <a-table-column title="Name">
        <template #cell="{ record }">
          {{ record.name }}
          <a-tooltip>
            <span>[hover]</span>
            <!-- content 通过 slot 方式传入 -->
            <template #content>
              <div>This is tooltip content</div>
            </template>
          </a-tooltip>
        </template>
      </a-table-column>
    </template>
  </a-table>
</template>

• 正常 v-for 去循环，也不会出现BUG

<ul>
    <li v-for="(item, i) in 10" :key="i">
      张三
      <a-tooltip content="This is tooltip content">
        <span>[hover]</span>
      </a-tooltip>
    </li>
  </ul>

Vue 工程是通过官网方式提供的 npm create vue@latest 新建的工程

Vite-App.mp4

[nuagecen]

vue 3.5 以下就没有这个问题。这个是 arco 的问题，还是 vue 的问题呢？