element-ui table组件 el-table-column宽度和对应位置总结 width="100"

element-ui table组件 el-table-column宽度和对应位置总结

以三列为例

1. 如果都不设置width则是平分宽度

<el-table-column prop="name" label="礼品名称"></el-table-column>
<el-table-column prop="priceRange" label="单价(元)" ></el-table-column>
<el-table-column prop="num" label="库存数量"></el-table-column>

2. 如果只有最后一列有宽度 则剩下的两列平分剩余宽度，且最后一列靠右

<el-table-column prop="name" label="礼品名称"></el-table-column>
<el-table-column prop="priceRange" label="单价(元)" ></el-table-column>
<el-table-column prop="num" label="库存数量" width="100"></el-table-column>

3.如果三列都有宽度，且总宽度小于table宽度，则会全部靠左显示，右侧留出空白

<el-table-column prop="name" width="155"  label="礼品名称"></el-table-column>
<el-table-column prop="priceRange" label="单价(元)" width="150"></el-table-column>
<el-table-column prop="num" label="库存数量" width="150"></el-table-column>

https://blog.csdn.net/a1059526327/article/details/112169133