Vue?element-ui表格內(nèi)嵌進(jìn)度條功能實(shí)現(xiàn)方法
一、引言
在著手做項(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屬性來(lái)對(duì)應(yīng)對(duì)象中的鍵名即可填入數(shù)據(jù)，用label屬性來(lái)定義表格的列名?？梢允褂脀idth屬性來(lái)定義列寬。
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é)語(yǔ)
本次實(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue使用技巧及vue項(xiàng)目中遇到的問題,本文給大家?guī)?lái)的只是一部分，后續(xù)還會(huì)持續(xù)更新，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-06-06
這篇文章主要介紹了Vue使用swiper問題(5.2.0版本,避免踩坑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了Vue組件實(shí)現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue3.2中的vuex使用詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
關(guān)于vue路由緩存清除在main.js中的設(shè)置
今天小編就為大家分享一篇關(guān)于vue路由緩存清除在main.js中的設(shè)置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-11-11
vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作
這篇文章主要介紹了vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-08-08
這篇文章主要介紹了Vue中的變量賦值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue中關(guān)于computed計(jì)算屬性的妙用
這篇文章主要介紹了Vue中關(guān)于computed計(jì)算屬性的妙用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)把頁(yè)面導(dǎo)出成word文件的方法,文中的實(shí)現(xiàn)步驟講解詳細(xì),并且有詳細(xì)的代碼示例,需要的小伙伴可以參考一下2023-10-10