怎么使用element-ui設置table組件寬度為百分比

本篇內容主要講解“怎么使用element-ui設置table組件寬度為百分比”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么使用element-ui設置table組件寬度為百分比”吧!

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="區縣"/>

element-ui設置table組件width為百分比無效

用min-width代替width

原理

解析的時候min-width和width設置的百分比號會被替換成px，但是min-width會按照比例分配剩余空間，所以要每一列都設置百分比，或寫數值，相當于設置各列的寬度比例值

到此，相信大家對“怎么使用element-ui設置table組件寬度為百分比”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！