問題描述: 想要每列寬度不同,不想使用 px 固定值,將 width 設置成百分比,但是每一列還是很窄
原因: el-table 組件會被 vue 解析成 html,vue 直接把百分號去掉把數值當做列寬來呈現,所以,width 設置百分比的值直接被解析去掉百分號% 變成 px 了
解決方案: 使用 min-width 代替 width
需要注意的是:width,min-width 的原理都是將值百分比去掉變成 px,可是 min-width 會按照比例分配剩余空間,并非直接算的百分比。因此要每一列都設置 min-width 才能實現每一列的百分比配置,設置成 min-width 以后,width 的值就被計算成 (當前值 / 全部列值和)的百分比了
<el-table v-loading="loading" :data="tableData"><el-table-column prop="id" label="ID" min-width="6%"></el-table-column><el-table-column prop="name" label="姓名" min-width="12%"></el-table-column><el-table-column prop="create_time" label="創建時間" min-width="24%"></el-table-column><el-table-column prop="update_time" label="更新時間" min-width="24%"></el-table-column>
</el-table>