|
一、引言 在著手做項(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é)果與討論 前期準(zhǔn)備工作 寫(xiě)出基出表格
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)定義表格的列名。可以使用width屬性來(lái)定義列寬。 Element組件地址https://element./#/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==='未開(kāi)始'" style="color: orange">未開(kāi)始</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:'未開(kāi)始',
progress:100
},{
zhuangtai:'已結(jié)束',
progress:10
},{
zhuangtai:'已結(jié)束',
progress:30
}],
}
</script> |
四、結(jié)語(yǔ) 本次實(shí)驗(yàn)解決的問(wèn)題為table表格中內(nèi)嵌進(jìn)度條，實(shí)現(xiàn)數(shù)值自定義功能。實(shí)驗(yàn)過(guò)程中，多次實(shí)驗(yàn)可行解決方案，最終發(fā)現(xiàn)可以根據(jù)scope.row行數(shù)據(jù)變化動(dòng)態(tài)顯示行內(nèi)控件。 稿件來(lái)源：深度學(xué)習(xí)與文旅應(yīng)用實(shí)驗(yàn)室（DLETA）
|
