首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue element-ui表格嵌进度条

Vue element-ui表格内嵌进度条功能实现方法

2022-03-25 09:58:56 作者：巨金玲

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,下面这篇文章主要给大家介绍了关于Vue element-ui表格内嵌进度条功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、引言

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

二、方法

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

需要使用到属性：

Type	进度条类型line/circle/dashboard
:text-inside	进度条显示文字内置在进度条内（只在 type=line 时可用）
:percentage	百分比（必填）
:color	进度条背景色（会覆盖 status 状态颜色）

三、实验结果与讨论

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是定义的变量进行赋值。

<template slot-scope="scope">
   <el-progress
   type="line"
   :stroke-width="15"
:percentage="scope.row.progress"
:color="blue"
   ></el-progress>
</template>

3完整实验代码

<el-table :data="jinDuData" style="width: 100%">
             <el-table-column
               prop="zhuangtai"
               label="状态"
             >
               <template scope="scope">
                 <span v-if="scope.row.zhuangtai==='进行中'" style="color: green">进行中</span>
                 <span v-else-if="scope.row.zhuangtai==='已延期'"  style="color: red">已延期</span>
                 <span v-else-if="scope.row.zhuangtai==='未开始'"  style="color: orange">未开始</span>
                 <span v-else style="color:gray"><del>已结束</del></span>
               </template>
             </el-table-column>
             <el-table-column
               prop="progress"
               label="进度"
             >
               <template slot-scope="scope">
                 <el-progress
                   type="line"
                   :stroke-width="15"
                   :percentage="scope.row.progress"
                   :color="blue"
                 ></el-progress>
               </template>
      </el-table-column>
</el-table>

<script>
export default {
 data() {
   return {
     reverse: true,
     jinDuData:[{
       zhuangtai:'进行中',
       progress:10
     },{
       zhuangtai:'进行中',
       progress:90
     },{
       zhuangtai:'已延期',
       progress:50
     },{
       zhuangtai:'已延期',
       progress:70
     },{
       zhuangtai:'未开始',
       progress:100
     },{
       zhuangtai:'已结束',
       progress:10
     },{
       zhuangtai:'已结束',
       progress:30
     }],
}
</script>

四、结语

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

到此这篇关于Vue element-ui表格内嵌进度条功能的文章就介绍到这了,更多相关Vue element-ui表格嵌进度条内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！