首頁 > 軟體

Vue element-ui表格內嵌進度條功能實現方法

2022-03-25 13:01:06

一、引言

在著手做專案時,尤其是後臺管理系統類的專案,不難會遇到,資料用進度條的形式呈現,視覺化。

二、方法

本次實驗主要應用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表格嵌進度條內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com