使用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會按照比例分配剩余空間，所以要每一列都設置百分比，或寫數(shù)值，相當于設置各列的寬度比例值
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vite是一種新型前端構建工具,能夠顯著提升前端開發(fā)體驗,下面這篇文章主要給大家介紹了關于vite對瀏覽器的請求做了什么的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2021-12-12
vue路由傳參的使用場景一般都是應用在父路由跳轉到子路由時,攜帶參數(shù)跳轉,下面這篇文章主要給大家介紹了關于vue路由傳參方式的方式總結及獲取參數(shù)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
在Vue中，computed屬性是一種計算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動態(tài)計算出來的，下面小編主要來和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧2023-06-06
詳解基于 axios 的 Vue 項目 http 請求優(yōu)化
這篇文章主要介紹了詳解基于 axios 的 Vue 項目 http 請求優(yōu)化,非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Element圖表初始大小及窗口自適應實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
本文主要介紹了如何在vuejs項目中使用md5加密密碼的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了關于vue-cli3打包代碼后白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了詳解vue如何添加babel?polyfill實現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06