后台管理el-table适配rem 如何完美解决缩小放大问题

在后台管理系统中使用 Element UI 的 el-table 进行表格布局时，要让表格适应 rem 布局并在缩放时保持良好显示，可以采取以下步骤：

1. **设置视口宽度监听**：
使用 JavaScript 监听 window 的 `resize` 事件，当窗口大小发生变化时，更新表格的列宽。

window.addEventListener('resize', function() {
  // 更新表格列宽逻辑
});

2. **计算列宽单位**：
将屏幕宽度转换为 rem 单位。例如，你可以将根元素的 `font-size` 作为基准值：

const baseFontSize = document.documentElement.style.fontSize;
function getColumnWidthByRem(colWidth) {
  return `${colWidth * parseFloat(baseFontSize) / 16}px`;
}

这里假设 `16px` 对应于 `1rem`。

3. **动态调整表头和数据列**：
当窗口尺寸变化时，重新计算并设置每个 table column 的 width，同时更新表格组件：

function adjustTableColumnWidths() {
  const cols = elTable.columns; // 获取el-table的columns
  cols.forEach(col => {
    col.width = getColumnWidthByRem(col.width);
  });
  elTable.doLayout(); // 刷新表格布局
}

adjustTableWidthOnResize();

4. **初始化时处理**：
初始化时也应用此函数，确保表格在初次加载时就适应了当前的视口大小。

5. **响应式设计**：
可能还需要考虑最小和最大宽度限制，防止极端情况下表格过于窄或宽。