Vue element-ui表格嵌进度条

一、引言

在着手做项目时，尤其是后台管理系统类的项目，不难会遇到，数据用进度条的形式呈现，可视化。

二、方法

本次实验主要应用element组件中的progress。

需要使用到属性：

三、实验结果与讨论

 

1.前期准备工作

写出基出表格

1.2使用JavaScript

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

Element组件地址https://element.eleme.cn/#/zh-CN/component/table

2.实现功能

使用数组，自定义进度条数值。:percentage="scope.row.progress"

根据scope.row行数据变化动态显示行内控件，progress是定义的变量进行赋值。

3完整实验代码

四、结语

本次实验解决的问题为table表格中内嵌进度条，实现数值自定义功能。实验过程中，多次实验可行解决方案，最终发现可以根据scope.row行数据变化动态显示行内控件。