element ui 浏览器发生变化时 对 Table 进行重新布局

Element UI 提供的表格组件（`el-table`）默认支持响应式设计，当浏览器窗口大小发生变化时，它会自动调整列宽以适应屏幕。然而，如果你想在其他浏览器事件（如滚动、缩放等）触发时手动重新布局表格，你可以利用 Vue 的自定义事件以及一些 CSS 动画技巧。

首先，确保 `el-table` 组件有一个动态的宽度属性，比如：

<template>
  <div @window:resize="onResize">
    <el-table :width="tableWidth" ref="tableRef"></el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableWidth: '100%', // 初始宽度
    };
  },
  methods: {
    onResize() {
      this.tableWidth = 'calc(100% - 20px)'; // 或者根据实际需求计算新的宽度
      this.$refs.tableRef.doLayout(); // 调用表格的 doLayout 方法，如果有的话
    },
  },
};
</script>

这里的关键点在于，当浏览器窗口发生改变时（`@window:resize`），`onResize` 方法会被调用，更新表格的宽度，并调用 `doLayout()` 方法（如果有提供这个方法的话）。对于 Element UI，可能需要查看其官方文档确认是否有此方法，或者查阅源码寻找类似功能。

如果你希望在滚动或者其他事件下也进行重新布局，可以添加相应的事件监听，例如 `window.scroll`：

mounted() {
  window.addEventListener('scroll', this.onScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.onScroll);
},
methods: {
  onScroll() {
    // ... 相同的操作，更新宽度并调用 doLayout()
  }
},