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