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>

猜你喜欢

转载自blog.csdn.net/a1059526327/article/details/112169133