使用element-ui設置table組件寬度(width)為百分比
更新時間：2023年04月13日 15:22:22 作者：小太陽...
這篇文章主要介紹了使用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="區(qū)縣"/>
element-ui設置table組件width為百分比無效
用min-width代替width
原理
解析的時候min-width和width設置的百分比號會被替換成px，但是min-width會按照比例分配剩余空間，所以要每一列都設置百分比，或?qū)憯?shù)值，相當于設置各列的寬度比例值
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue關于select組件綁定的值為數(shù)字類型的問題
這篇文章主要介紹了vue關于select組件綁定的值為數(shù)字類型的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue控制臺警告Runtime directive used on compon
這篇文章主要為大家介紹了vue控制臺警告Runtime directive used on component with non-element root node解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題
這篇文章主要介紹了如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了簡單了解vue中父子組件如何相互傳遞值（基礎向）,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
elementUI同一頁面展示多個Dialog的實現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
antdv vue upload自定義上傳結(jié)合表單提交方式
這篇文章主要介紹了antdv vue upload自定義上傳結(jié)合表單提交方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
解決VUE項目localhost端口服務器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項目localhost端口服務器拒絕連接,只能用127.0.0.1的問題2020-08-08
在前端開發(fā)中,當用戶頻繁連續(xù)點擊按鈕,可能會導致頻繁的請求或者觸發(fā)過多的操作,本文主要介紹了vue3按鈕點擊頻率控制的實現(xiàn)示例,感興趣的可以了解一下2024-01-01
這篇文章主要為大家詳細介紹了vue自定義開發(fā)滑動圖片驗證組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03