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>