el-progress 如何自适应大小
时间: 2023-10-18 07:19:41 浏览: 560
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
el-progress 是 Element UI 框架中的一个进度条组件。要让 el-progress 自适应大小,可以使用 flex 布局或者 CSS 百分比来设置它的宽度。
使用 flex 布局:
```html
<div style="display: flex;">
<el-progress :percentage="50" style="flex: 1;"></el-progress>
</div>
```
上面的代码中,使用了 flex 布局将 el-progress 放入一个 flex 容器中,并设置了 flex: 1; 让它的宽度自适应容器的宽度。
使用 CSS 百分比:
```html
<el-progress :percentage="50" style="width: 50%;"></el-progress>
```
上面的代码中,设置了 el-progress 的宽度为 50% ,这样它的宽度就会随着父元素宽度的变化而自适应。
阅读全文