Vue element-ui form embedded progress bar

I. Introduction

When starting a project, especially a background management system project, it is not difficult to encounter that the data is presented in the form of a progress bar and visualized.

2. Method

This experiment mainly uses the progress in the element component.

Attributes need to be used:

Type	Progress bar type line/circle/dashboard
:text-inside	The progress bar display text is built into the progress bar (only available when type=line)
:percentage	percentage (required)
:color	Progress bar background color (will override status status color)

3. Experimental results and discussion

 

1. Preparatory work

write base table

1.2 Using JavaScript

After the data object array is injected into the el-table element, use the prop attribute in the el-table-column to correspond to the key name in the object to fill in the data, and use the label attribute to define the column name of the table. You can use the width attribute to define the column width.

Element component address https://element.eleme.cn/#/zh-CN/component/table

2. Realize the function

Use an array to customize the value of the progress bar. :percentage="scope.row.progress"

According to the change of scope.row row data, the in-row control is dynamically displayed, and progress is a defined variable for assignment.

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

3 complete experimental code

<el-table :data="jinDuData" style="width: 100%"> 
             <el-table-column 
               prop="zhuangtai" 
               label="status" 
             > 
               <template scope="scope"> 
                 <span v-if= "scope.row.zhuangtai==='in progress'" style="color: green">in progress</span> 
                 <span v-else-if="scope.row.zhuangtai==='postponed'" style="color: red">Postponed</span> 
                 <span v-else-if="scope.row.zhuangtai==='Not Started'" style="color: orange">Not Started</span> 
                 <span v-else style="color:gray"><del>End</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:'in progress', 
       progress:10 
     },{ 
       zhuangtai:'in progress', 
       progress:90 
     },{ 
       zhuangtai:'in progress Postponed', 
       progress:50 
     },{ 
       zhuangtai:'Postponed', 
       progress:70 
     },{ 
       zhuangtai:'Not started', 
       progress:100 
     },{ 
       zhuangtai:'Ended', 
       progress:10 
     },{ 
       zhuangtai: 'End', 
       progress:30 
     }], 
} 
</script>

Four. Conclusion

The problem solved in this experiment is to embed the progress bar in the table to realize the value customization function. During the experiment, the feasible solution was tested many times, and finally it was found that the in-row control can be dynamically displayed according to the change of scope.row row data.