Search code examples
vue.jselement-ui

Element UI Table - Add Percentage as Width

We can add width to an element ui table column as such:

<el-table-column
  prop="city"
  label="City"
  width="120">
</el-table-column>

However, it only produces a pixel value.

Is there any solution how to make it use a percentage value?

Solution

  • Oddly enough, for <el-table-column>, width is in pixels, but min-width is distributed proportionally between the columns. Here's how a table might span 100% of the clientWidth with columns that are 33% and 67%:

    <el-table :data="[{a:1,b:2}]" style="width: 100%" ref="table">
    <el-table-column :min-width="33" prop="a" label="A"></el-table-column>
    <el-table-column :min-width="67" prop="b" label="B"></el-table-column>
</el-table>

    https://jsfiddle.net/jmbldwn/rn05vbsL/2/