elementui 表格内嵌进度条
时间: 2023-10-27 07:52:09 浏览: 44
在 ElementUI 的表格中嵌入进度条,可以通过自定义列模板来实现。具体步骤如下:
1. 在表格中定义一个自定义列模板,例如:
```html
<el-table-column label="进度">
<template slot-scope="scope">
<el-progress :percentage="scope.row.progress" />
</template>
</el-table-column>
```
其中,`scope.row.progress` 表示表格当前行的进度值。
2. 在表格的列定义中,将上述自定义列模板作为一列添加进去,例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column label="进度">
<template slot-scope="scope">
<el-progress :percentage="scope.row.progress" />
</template>
</el-table-column>
</el-table>
```
其中,`tableData` 是表格的数据源,`prop` 表示数据源中对应列的字段名。
这样,就可以在表格中嵌入进度条了。效果如下:
![表格内嵌进度条](https://i.loli.net/2021/08/16/2vZr5JfKd1n8Y7W.png)