使用element-ui设置table组件宽度(width)为百分比
作者：小太阳...
这篇文章主要介绍了使用element-ui设置table组件宽度(width)为百分比方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element-ui设置table组件宽度为百分比
直接设置width：'xx%'是无效的，
所有的width都设置为min-width，然后每一个el-table-column都需要设置百分比才会生效。
代码如下
<el-table-column
prop="projectName"
min-width="24%" //设置百分比
label="项目点位名称"/>
<el-table-column
prop="sumPre"
min-width="12%" //设置百分比
label="累积降水量">
<template slot-scope="scope">
{{ parseFloat(scope.row.sumPre.toFixed(1)) }} mm
</template>
</el-table-column>
<el-table-column
prop="companyName"
min-width="24%" //设置百分比
label="所属单位"/>
<el-table-column
prop="province"
min-width="10%" //设置百分比
label="省"/>
<el-table-column
prop="city"
min-width="10%" //设置百分比
label="市"/>
<el-table-column
prop="county"
min-width="10%" //设置百分比
label="区县"/>
element-ui设置table组件width为百分比无效
用min-width代替width
原理
解析的时候min-width和width设置的百分比号会被替换成px，但是min-width会按照比例分配剩余空间，所以要每一列都设置百分比，或写数值，相当于设置各列的宽度比例值
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。