快捷導(dǎo)航

Vue?element-ui表格內(nèi)嵌進(jìn)度條功能實(shí)現(xiàn)方法

更新時(shí)間：2022年03月25日 10:00:00 作者：巨金玲

Element-Ul是餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js 2.0 的桌面端UI框架,下面這篇文章主要給大家介紹了關(guān)于Vue?element-ui表格內(nèi)嵌進(jìn)度條功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、引言

在著手做項(xiàng)目時(shí)，尤其是后臺(tái)管理系統(tǒng)類的項(xiàng)目，不難會(huì)遇到，數(shù)據(jù)用進(jìn)度條的形式呈現(xiàn)，可視化。

二、方法

本次實(shí)驗(yàn)主要應(yīng)用element組件中的progress。

需要使用到屬性：

Type	進(jìn)度條類型line/circle/dashboard
:text-inside	進(jìn)度條顯示文字內(nèi)置在進(jìn)度條內(nèi)（只在 type=line 時(shí)可用）
:percentage	百分比（必填）
:color	進(jìn)度條背景色（會(huì)覆蓋 status 狀態(tài)顏色）

三、實(shí)驗(yàn)結(jié)果與討論

1.前期準(zhǔn)備工作

寫出基出表格

1.2使用JavaScript

當(dāng)el-table元素中注入data對(duì)象數(shù)組后，在el-table-column中用prop屬性來對(duì)應(yīng)對(duì)象中的鍵名即可填入數(shù)據(jù)，用label屬性來定義表格的列名?？梢允褂脀idth屬性來定義列寬。

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

2.實(shí)現(xiàn)功能

使用數(shù)組，自定義進(jìn)度條數(shù)值。:percentage="scope.row.progress"

根據(jù)scope.row行數(shù)據(jù)變化動(dòng)態(tài)顯示行內(nèi)控件，progress是定義的變量進(jìn)行賦值。

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

3完整實(shí)驗(yàn)代碼

<el-table :data="jinDuData" style="width: 100%">
             <el-table-column
               prop="zhuangtai"
               label="狀態(tài)"
             >
               <template scope="scope">
                 <span v-if="scope.row.zhuangtai==='進(jìn)行中'" style="color: green">進(jìn)行中</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>已結(jié)束</del></span>
               </template>
             </el-table-column>
             <el-table-column
               prop="progress"
               label="進(jìn)度"
             >
               <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:'進(jìn)行中',
       progress:10
     },{
       zhuangtai:'進(jìn)行中',
       progress:90
     },{
       zhuangtai:'已延期',
       progress:50
     },{
       zhuangtai:'已延期',
       progress:70
     },{
       zhuangtai:'未開始',
       progress:100
     },{
       zhuangtai:'已結(jié)束',
       progress:10
     },{
       zhuangtai:'已結(jié)束',
       progress:30
     }],
}
</script>

四、結(jié)語

本次實(shí)驗(yàn)解決的問題為table表格中內(nèi)嵌進(jìn)度條，實(shí)現(xiàn)數(shù)值自定義功能。實(shí)驗(yàn)過程中，多次實(shí)驗(yàn)可行解決方案，最終發(fā)現(xiàn)可以根據(jù)scope.row行數(shù)據(jù)變化動(dòng)態(tài)顯示行內(nèi)控件。

到此這篇關(guān)于Vue element-ui表格內(nèi)嵌進(jìn)度條功能的文章就介紹到這了,更多相關(guān)Vue element-ui表格嵌進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: