vue让elementUI和elementPlus标签内属性支持rem单位

vue让elementUI和elementPlus标签内属性支持rem单位

如 Element Plus 的 el-table 默认不直接支持使用 rem 作为列宽单位

解决方法:

• 将 rem 转换为像素值（基于根元素字体大小）

// 计算rem对应的像素值
const calcRem = (remValue) => {
  // 获取根元素(html)的字体大小
  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)
  return remValue * rootFontSize
}

<el-table :data="tableData">
    <el-table-column 
      prop="name" 
      label="姓名" 
      :width="calcRem(10)"  <!-- 相当于10rem -->
    ></el-table-column>
    <el-table-column 
      prop="age" 
      label="年龄" 
      :width="calcRem(5)"   <!-- 相当于5rem -->
    ></el-table-column>
  </el-table>