問題：
使用 Element el-table 組件時，給列 el-table-column 設(shè)置百分比%寬度無效( width="30%" )
解決：
Vue中要將 el-table-column 的寬度設(shè)置成百分比的話，不能通過設(shè)置 width來實現(xiàn)，而是要設(shè)置 min-width，并且每一列都必須設(shè)置 min-width。
原因：
el-table 組件會被 vue 解析成 html，Vue直接把百分號去掉把數(shù)值當(dāng)做列寬來呈現(xiàn)，所以，width 設(shè)置百分比的值直接被解析去掉百分號% 變成 px 了。
需要注意的是：width，min-width 的原理都是將值百分比去掉變成 px?？墒?min-width 會按照比例分配剩余空間，并非直接算的百分比。（因此要每一列都設(shè)置 min-width 才能實現(xiàn)每一列的百分比配置）設(shè)置成 min-width 以后，width 的值就被計算成 （當(dāng)前值 / 全部列值和）的百分比了。文章來源：http://www.zghlxwxcb.cn/news/detail-401362.html
這里我倒覺得設(shè)計的挺好的，在 html 中使用 width 設(shè)置百分比的時候總要關(guān)心其總和需要是 100%，維護(hù)起來也比較麻煩，而這種設(shè)置百分比并不需要其總和為100%，我覺得這是一項改進(jìn)。文章來源地址http://www.zghlxwxcb.cn/news/detail-401362.html
示例：
<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="創(chuàng)建時間" min-width="24%"></el-table-column>
<el-table-column prop="update_time" label="更新時間" min-width="24%"></el-table-column>
</el-table>
到了這里，關(guān)于Element UI 使用 table 組件設(shè)置 el-table-column 寬度width為百分比無效的問題解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
