设置element表头某个element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示字段悬浮

Element UI 的 Table 表格中，当表头内容过长导致无法完全展示时，可以利用其内置的自适应列宽功能结合 CSS 实现省略号（“…”）的显示以及鼠标悬停时的字段展开。以下是步骤：

1. 首先，在 `el-table-column` 标签上设置 `show-overflow-tooltip` 属性，这将启用文本溢出提示。

<el-table-column prop="yourColumn" label="长标题" :show-overflow-tooltip="true">

2. 然后，你可以通过 CSS 来调整样式，让鼠标悬停时表头内容能够展开并显示完整。例如，添加一个新的 `title` 属性来存储完整的字段名，然后在 `.el-tooltip__popper` 类下添加 `.expanded` 类来改变显示状态：

.el-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}

.el-tooltip__popper.expanded {
  width: auto !important; /* 或者设置具体的宽度值 */
}

3. 当需要触发展开效果时，可以在列的 `formatter` 函数中检查是否应该显示完整的内容。比如，当点击或悬停时，切换 `expanded` 类：

<template>
  <el-table-column
    prop="yourColumn"
    label="长标题"
    :show-overflow-tooltip="true"
    :formatter="formatTitle"
  ></el-table-column>
</template>

<script>
export default {
  methods: {
    formatTitle(h, { row, column, $index }) {
      return `${column.label}...`;
      // 在这里添加逻辑，如判断是否已展开，展开则返回完整内容
      // 例如：return row.yourColumn || '...'
    },
  },
};
</script>