vue3笔记（27-4）el-table自适应

el-table 表格长度自适应是交互优化中很重要的一环，本次做了很多尝试，记录一下写法和出现的问题。

问题描述

当前给表格固定了列宽，前后分别设定了部分固定栏（例如：左侧的序号列，右侧的操作列），container 不设置 width，只有一个 min-width，保证页面缩小时内容依然保持一定样式不重叠，页面拉长时表格可以跟随拉长，直至平铺。
这对于长表格（列数多）来说没有问题，但对于短表格（列数少），会出现右侧空白，影响整体美观。

修改方案：按照 width * 系数计算实时列宽

计划采用百分比布局，使其自适应，尝试后发现 el-table-column 并不能识别。所以尝试手动修改比例系数。

<el-table-column
  prop="create_by_name"
  label="创建人"
  :width="100 * scaleRate"
  show-overflow-tooltip
></el-table-column>

页面初始化时做一次计算，挂载定时器，页面销毁时，卸载定时器。

onMounted(() => {
  calcRate()
  windowDraw()
})
onUnmounted(() => {
  loadingTable.value = false
  unWindowDraw()
})

计算系数如下，其中 totalWidth 为列宽的长度总和，64px 为侧栏收起时

const totalWidth = 1000
// 改变窗口大小重新绘制
const windowDraw = () => {
  window.addEventListener('resize', resize)
}

// 改变窗口大小重新绘制
const unWindowDraw = () => {
  window.removeEventListener('resize', resize)
}
// * 定时函数
const timer = ref(0)
const resize = () => {
  clearTimeout(timer.value)
  timer.value = window.setTimeout(() => {
    calcRate()
  }, 200)
}

const calcRate = () => {
  const innerWidth = window.innerWidth //视口的宽
  const sidebar = appStore.getSidebar
  const isCollapse = !sidebar.opened
  let currentWidth
  if (isCollapse) {
    currentWidth = innerWidth - 64 - 96 
  } else {
    currentWidth = innerWidth - 208 - 96
  }
  if (currentWidth >= totalWidth) {
    const rate = currentWidth / totalWidth + ''
    state.scaleRate = Number(rate.substring(0, rate.indexOf('.') + 3))
  }
}