需要根據(jù)接口數(shù)據(jù) 開始時間和結(jié)束時間 動態(tài)加載月份進(jìn)度條所在位置
完成效果
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;text-align:center"
:span-method="objectSpanMethod"
row-key="id"
border
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="name" label="維保名稱" width="120">
</el-table-column>
<el-table-column prop="starttime" label="開始時間" width="120">
</el-table-column>
<el-table-column prop="endtime" label="結(jié)束時間" width="120">
</el-table-column>
<template v-for="column in monthList">
<el-table-column
:key="column.name"
:label="column.name"
width="80"
prop="percent"
>
<template slot-scope="scope">
<p v-if="!scope.row[column.col]"></p>
<el-progress
v-else
:text-inside="true"
:stroke-width="26"
:percentage="scope.row.percent"
></el-progress>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
monthList: [
{ col: "Jan", name: "一月" },
{ col: "Feb", name: "二月" },
{ col: "Mar", name: "三月" },
{ col: "Apr", name: "四月" },
{ col: "May", name: "五月" },
{ col: "Jun", name: "六月" },
{ col: "Jul", name: "七月" },
{ col: "Aug", name: "八月" },
{ col: "Spt", name: "九月" },
{ col: "Oct", name: "十月" },
{ col: "Nov", name: "十一月" },
{ col: "Dec", name: "十二月" }
],
tableData: [
{
starttime: "2020-01-02",
endtime: "2020-03-05",
name: "作業(yè)1",
id: 32,
percent: 50,
children: [
{
id: 37,
starttime: "2020-03-02",
endtime: "2020-05-05",
name: "作業(yè)11",
percent: 20
},
{
id: 38,
starttime: "2020-05-02",
endtime: "2020-08-05",
name: "作業(yè)12",
percent: 30
}
]
},
{
starttime: "2020-08-02",
endtime: "2020-12-05",
name: "作業(yè)1",
id: 111,
percent: 50,
children: [
{
id: 1111,
starttime: "2020-03-02",
endtime: "2020-05-05",
name: "作業(yè)11",
percent: 20
},
{
id: 1231,
starttime: "2020-05-02",
endtime: "2020-08-05",
name: "作業(yè)12",
percent: 30
}
]
},
{
starttime: "2020-03-02",
endtime: "2020-07-05",
id: "21",
name: "作業(yè)2",
percent: 40
},
{
starttime: "2020-09-02",
endtime: "2020-12-05",
id: "22",
name: "作業(yè)43",
percent: 50
},
{
starttime: "2020-04-02",
endtime: "2020-09-05",
id: "23",
name: "作業(yè)45",
percent: 60
},
{
starttime: "2020-02-02",
endtime: "2020-05-05",
id: "24",
name: "作業(yè)54",
percent: 70
}
]
};
},
mounted: function() {
// 組件創(chuàng)建完后獲取數(shù)據(jù)靠汁,
// 此時 data 已經(jīng)被 observed 了
//處理數(shù)據(jù)
this.handleData(this.tableData);
console.log(this.tableData)
},
methods: {
//獲取月份的英文
getMonthEN(date){
var monthEnglish = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec"];
return monthEnglish[new Date(new Date(date)).getMonth()];
},
//獲取月份數(shù)字
getMonth(date){
return new Date(new Date(date)).getMonth() + 1
},
handleData(data){
data.forEach(item => {
//處理幾月開始幾月結(jié)束
item.startMonthEN = this.getMonthEN(item.starttime)
item.endMonthEN = this.getMonthEN(item.endtime)
item.startMonth = this.getMonth(item.starttime)
item.endMonth = this.getMonth(item.endtime)
this.monthList.forEach(monthItme => {
var col = monthItme.col
if (item.startMonthEN == col) {
item[col] = true
}else {
item[col] = false
}
});
//遞歸處理children數(shù)據(jù)
if (item.children) {
this.handleData(item.children)
}
});
},
//合并列
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 2 + +row.startMonth) {
return [1, +row.endMonth - +row.startMonth + 1];
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>