element UI表头怎么hover显示全部

如果你想要鼠标悬浮在 Element UI 表格的表头时显示全部内容（包括被省略的部分），可以使用 `tooltip-effect` 属性来实现。

`tooltip-effect` 属性可以设置为 `dark`、`light`、`plain` 或者自定义的字符串，其中自定义的字符串会被作为 CSS 类名添加到表头元素上。你可以利用这个特性，自定义一个 CSS 类名，然后利用 CSS 样式来实现悬浮显示全部内容的效果。

例如，你可以这样定义一个 CSS 类名：

.my-tooltip {
  position: relative;
}

.my-tooltip:hover::after {
  content: attr(data-title);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 8px;
  background-color: #333;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
}

然后在表格组件中使用这个 CSS 类名：

<el-table :data="tableData" tooltip-effect="my-tooltip">
  <el-table-column prop="id" label="ID" />
  <el-table-column prop="name" label="Name" />
  <el-table-column prop="age" label="Age" />
  <!-- 其他表格列的定义 -->
</el-table>

在这个例子中，我们将 `tooltip-effect` 属性设置为 `my-tooltip`，这样表头元素就会被添加上 `my-tooltip` 这个 CSS 类名。然后我们在 CSS 样式中定义了这个类名的样式，利用 `content` 属性来显示表头的 `data-title` 属性的值，利用 `position: absolute` 和 `transform` 属性来将提示框居中显示在表头下方。

最后，我们在表格列的定义中，利用 `label` 属性来设置表头的文本内容，利用 `data-title` 属性来设置鼠标悬浮时提示框的内容。当表头文本内容过长时，浏览器会自动将其省略，这时鼠标悬浮在表头上，就可以看到完整的表头文本内容了。