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>