Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Component] [table, table-column] el-table内的show-overflow-tooltip属性,在windows的chrome浏览器内,会在文字没有溢出时,也会出现Tooltip 文字提示 #16871

Closed
xiaoxintiaoda opened this issue May 15, 2024 · 2 comments

Comments

@xiaoxintiaoda
Copy link

xiaoxintiaoda commented May 15, 2024

Bug Type: Component

Environment

  • Vue Version: 3.3.4
  • Element Plus Version: 2.7.3
  • Browser / OS: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
  • Build Tool: Vite

Reproduction

Related Component

  • el-table
  • el-table-column

Reproduction Link

Element Plus Playground

Steps to reproduce

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" show-overflow-tooltip/>
    <el-table-column label="Date" width="120" show-overflow-tooltip>
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" show-overflow-tooltip/>
    <el-table-column property="address" label="Address" show-overflow-tooltip />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
      Toggle selection status of second and third rows
    </el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

What is Expected?

文字没有溢出时,el-table-column设置show-overflow-tooltip为true时,不应该出现tool tip框,在windows10上的chrome会出现此问题,在macos的chrome是正常的

What is actually happening?

在windows10上的chrome中,文字没有溢出时,el-table-column设置show-overflow-tooltip为true时,也出现了tool tip框

Additional comments

(empty)

@xiaoxintiaoda
Copy link
Author

2024-05-15_223347

@btea
Copy link
Collaborator

btea commented May 16, 2024

Duplicate of #16856

@btea btea marked this as a duplicate of #16856 May 16, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants