el-table 表头超出隐藏

`el-table` 是 Element UI 中的一个表格组件，当表头的内容过长导致超出容器宽度时，你可以使用 `show-header` 和 `cell-class-name` 选项来实现表头的自动隐藏和显示。默认情况下，表头是不滚动的，但如果设置 `show-header` 为 `false`，则可以在需要的时候隐藏表头。

具体操作如下：

1. 配置 `show-header` 属性：

<el-table :data="tableData" :show-header="isShowHeader">
  <!-- 其他表头和列配置 -->
</el-table>

2. 使用 `cell-class-name` 根据表头单元格的宽度来动态调整样式。创建一个方法来控制 `isShowHeader` 的值：

export default {
  data() {
    return {
      tableData: ...,
      isShowHeader: true, // 默认开启
      // 其他数据
    };
  },
  methods: {
    toggleHeader() {
      this.isShowHeader = !this.isShowHeader;
    }
  },
  computed: {
    // 如果需要根据某些条件隐藏表头，可以在 computed 中计算 isShowHeader
    // 例如，如果某个列的数据长度过长：
    headerLengthComputed() {
      const longColumnData = this.tableData.longColumnData; // 假设有一个 'longColumnData' 属性
      return longColumnData.length > someThreshold ? false : true;
    },
    isShowHeaderComputed() {
      return this.headerLengthComputed;
    }
  },
};

然后，在模板中添加一个点击事件来切换表头显示状态：

<el-table-column
  cell-class-name="headerClass"
  label="Long Column Header"
  width="100"
  @click="toggleHeader"
/>

CSS 类 `headerClass` 可以用来调整隐藏状态下的样式：

.headerClass.hidden {
  display: none;
}