<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="结束时间" 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">
<!-- 双击文字或点击修改图标以更改"show"属性 -->
<!-- scope.row为元数据，column.col为该列的'键' -->
<p v-show="!scope.row[column.col]">
</p>
<!-- 失去焦点时更改"show"属性，显示文本 -->
<el-progress v-show="scope.row[column.col]" :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 {
// <el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.percent" >
// </el-progress>
spanArr:[],
monthColStartIndex: 0,
monthList: [
{col: "one", name:"一月",isShow:false},
{col: "two", name:'二月',isShow:false},
{col: "three", name:'三月',isShow:false},
{col: "four", name:'四月',isShow:false},
{col: "five", name:'五月',isShow:false},
{col: "six", name:'六月',isShow:false},
{col: "seven", name:'七月',isShow:false},
{col: "eight", name:'八月',isShow:false},
{col: "nine", name:'九月',isShow:false},
{col: "ten", name:'十月',isShow:false},
{col: "eleven", name:'十一月',isShow:false},
{col: "twelve", name:'十二月',isShow:false}],
tableData: [
{
one: true,
two: false,
three: false,
four: false,
five: false,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
starttime: "2020-01-02",
endtime: "2020-03-05",
name: "作业1",
id: 32,
startDate: '1',
endDate: '3',
percent: '50',
children: [
{
one: false,
two: false,
three: true,
four: false,
five: false,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
id: 31,
startDate: '3',
endDate: '5',
starttime: "2020-03-02",
endtime: "2020-05-05",
name: "作业11",
percent: 20,
},
{
one: false,
two: false,
three: false,
four: false,
five: true,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
id: 33,
startDate: '5',
endDate: '8',
starttime: "2020-05-02",
endtime: "2020-08-05",
name: "作业12",
percent: 30,
},
],
},
{
one: false,
two: false,
three: false,
four: false,
five: false,
six: false,
seven: false,
eight: true,
nine: false,
ten: false,
eleven: false,
twelve: false,
starttime: "2020-08-02",
endtime: "2020-12-05",
name: "作业1",
id: 32,
startDate: '8',
endDate: '12',
percent: '50',
children: [
{
one: false,
two: false,
three: true,
four: false,
five: false,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
id: 31,
startDate: '3',
endDate: '5',
starttime: "2020-03-02",
endtime: "2020-05-05",
name: "作业11",
percent: 20,
},
{
one: true,
two: false,
three: false,
four: false,
five: false,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
id: 33,
startDate: '5',
endDate: '8',
starttime: "2020-05-02",
endtime: "2020-08-05",
name: "作业12",
percent: 30,
},
],
},
{
one: false,
two: false,
three: true,
four: false,
five: false,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
startDate: '3',
endDate: '7',
starttime: "2020-03-02",
endtime: "2020-07-05",
id: "21",
name: "作业2",
percent: 40,
},
{
one: false,
two: false,
three: false,
four: false,
five: false,
six: false,
seven: false,
eight: false,
nine: true,
ten: false,
eleven: false,
twelve: false,
startDate: '9',
endDate: '12',
starttime: "2020-09-02",
endtime: "2020-12-05",
id: "22",
name: "作业43",
percent: 50,
},
{
one: false,
two: false,
three: false,
four: true,
five: false,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
startDate: '4',
endDate: '9',
starttime: "2020-04-02",
endtime: "2020-09-05",
id: "23",
name: "作业45",
percent: 60,
},
{
one: false,
two: true,
three: false,
four: false,
five: false,
six: false,
seven: false,
eight: false,
nine: false,
ten: false,
eleven: false,
twelve: false,
startDate: '2',
endDate: '5',
starttime: "2020-02-02",
endtime: "2020-05-05",
id: "24",
name: "作业54",
percent: 70,
},
],
};
},
mounted: function () {
// 组件创建完后获取数据，
// 此时 data 已经被 observed 了
// this.getSpanArr(this.tableData);
},
methods: {
// getSpanArr(data) {
// },
// handleSign(row, column, cellValue, index){
// return row.percent = '<progress value="'+ row.percent +'" max="100"></progress>"'
// },
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(row);
if (columnIndex === (2 + +row.startDate)) {
return [1, (+row.endDate) - (+row.startDate) + 1];
}
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
image.png
