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>
