【Vue+ElementUI】el-table动态高度设置及表格内容错乱对不齐

在Vue中使用ElementUI的el-table组件时，如果需要动态设置表格的高度，并避免内容错乱对不齐的问题，可以通过以下方法实现：

1. 使用样式绑定来动态设置表格的高度。
2. 使用Vue的ref属性获取DOM元素，然后动态修改其样式。
3. 使用ElementUI提供的max-height属性来设置表格的最大高度，并通过内部内容的滚动来处理超出部分。

以下是一个简单的示例代码：

<template>
  <div>
    <el-table
      :data="tableData"
      :max-height="tableHeight"
      style="width: 100%">
      <!-- 列配置 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 表格数据
      tableHeight: 300, // 初始表格高度
    };
  },
  mounted() {
    this.setTableHeight(); // 在组件挂载后设置表格高度
    window.addEventListener('resize', this.setTableHeight); // 监听窗口大小变化
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.setTableHeight); // 移除监听器
  },
  methods: {
    setTableHeight() {
      // 根据需要动态计算高度，这里以窗口高度减去固定值为例
      this.tableHeight = window.innerHeight - 100;
    }
  }
};
</script>

在这个示例中，我们在组件的mounted钩子中设置了表格高度，并且添加了窗口大小变化的监听，以便在窗口尺寸发生变化时动态调整表格高度。我们还需要在组件销毁前移除监听器，以防止内存泄露。

请注意，根据实际情况，可能需要调整计算表格高度的逻辑以满足具体需求。