Element UI uses the Table component to set the width of el-table-column to a percentage

Question:

When using Element el-table, setting % width for column el-table-column is invalid (width=”30%”)

Solution:

To set the width of an el-table-column to a percentage in Vue, you do not set width, you set min-width, and each column must be set min-width.

The reason:

The el-table component is parsed to HTML by Vue, which removes the percentage sign and renders the value as a column width, so the percentage value set by width is parsed with the percentage sign removed and becomes PX.

< span style = “max-width: 100%; clear: both; min-width: 100%; However, min-width allocates the remaining space proportionally, not directly as a percentage. When set to min-width, the value of width is calculated as a percentage of (current value/total column value).

In this case, I think the design is pretty good. When you use width to set the percentage in HTML, you always have to be aware that the sum has to be 100%, which is a bit of a hassle to maintain, but it doesn’t have to be 100%, which I think is an improvement.

Example:

<el-table v-loading="loading" :data="tableData">
	<el-table-column prop="id" label="ID" min-width="6%"></el-table-column>
	<el-table-column prop="name" label="Name" min-width="12%"></el-table-column>
	<el-table-column prop="create_time" label="Creation time" min-width="24%"></el-table-column>
	<el-table-column prop="update_time" label="Update Time" min-width="24%"></el-table-column>
</el-table>
Copy the code