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