使用element-ui設(shè)置table組件寬度(width)為百分比

更新時間：2023年04月13日 15:22:22 作者：小太陽...

這篇文章主要介紹了使用element-ui設(shè)置table組件寬度(width)為百分比方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

element-ui設(shè)置table組件寬度為百分比

直接設(shè)置width：'xx%'是無效的，

所有的width都設(shè)置為min-width，然后每一個el-table-column都需要設(shè)置百分比才會生效。

代碼如下

    <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為百分比無效

用min-width代替width

原理

解析的時候min-width和width設(shè)置的百分比號會被替換成px，但是min-width會按照比例分配剩余空間，所以要每一列都設(shè)置百分比，或?qū)憯?shù)值，相當(dāng)于設(shè)置各列的寬度比例值

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue關(guān)于select組件綁定的值為數(shù)字類型的問題
這篇文章主要介紹了vue關(guān)于select組件綁定的值為數(shù)字類型的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue控制臺警告Runtime directive used on compon
這篇文章主要為大家介紹了vue控制臺警告Runtime directive used on component with non-element root node解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題
這篇文章主要介紹了如何解決element-ui中多個table在tab切換時出現(xiàn)寬度縮小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
簡單了解vue中父子組件如何相互傳遞值（基礎(chǔ)向）
這篇文章主要介紹了簡單了解vue中父子組件如何相互傳遞值（基礎(chǔ)向）,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
elementUI同一頁面展示多個Dialog的實(shí)現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項(xiàng)目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
antdv vue upload自定義上傳結(jié)合表單提交方式
這篇文章主要介紹了antdv vue upload自定義上傳結(jié)合表單提交方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題
2020-08-08
vue3按鈕點(diǎn)擊頻率控制的實(shí)現(xiàn)示例
在前端開發(fā)中,當(dāng)用戶頻繁連續(xù)點(diǎn)擊按鈕,可能會導(dǎo)致頻繁的請求或者觸發(fā)過多的操作,本文主要介紹了vue3按鈕點(diǎn)擊頻率控制的實(shí)現(xiàn)示例,感興趣的可以了解一下
2024-01-01
vue自定義開發(fā)滑動圖片驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了vue自定義開發(fā)滑動圖片驗(yàn)證組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03