问题描述：
image.png
WXWorkCapture_16939890339525.png
打印对象，对象存在，控制台不报错
WXWorkCapture_16939890596553.png
WXWorkCapture_16939890839488.png
使用里面的属性，就出现了问题
解决办法
image.png
先判断属性是否存在，在执行取属性
<template slot-scope="scope">{{ scope.row.detailList[key] && scope.row.detailList[key].grossValue}}</template>
全部代码
<template>
<div>
<div style="display: flex;justify-content: flex-start">
<el-form :inline="true" label-width="80px" :model="reportForm">
<el-form-item label="模板名称">
<el-select v-model="reportForm.reportId" placeholder="请选择" @change="changeValue">
<el-option
v-for="item in reportTemplateOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="时间类型">
<el-date-picker
v-model="reportForm.time"
:type="dateType"
:key="dateType"
placeholder="请选择">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadTemplateData">确定</el-button>
</el-form-item>
</el-form>
</div>
<div v-for="(item,index) in groupTableData" :key="index" style="margin-top: 10px">
<!--一个card就是一个分组-->
<el-card shadow="never" style="overflow:inherit;">
<div slot="header" style="display: flex;justify-content: flex-start">
<el-form :inline=true label-width="80px">
<el-form-item label="组总用量">
<el-tag>{{ item.sumGroupGross }}</el-tag>
</el-form-item>
<el-form-item label="用量差" v-if="index>0">
<el-tag>{{ item.groupGrossDivide }}</el-tag>
</el-form-item>
<el-form-item label="百分比" v-if="index>0">
<el-tag>{{ item.groupGrossRate }}</el-tag>
</el-form-item>
</el-form>
</div>
<div>
<el-table :data="item.reportDynamicTableDataVoList"
style="width: 100%">
<el-table-column
type="index"
label="序号"
>
</el-table-column>
<el-table-column
prop="indexName"
label="名称">
</el-table-column>
<el-table-column
prop="sumGross"
label="总用量">
</el-table-column>
<el-table-column
prop="operationName"
label="操作">
</el-table-column>
<el-table-column
prop="coefficient"
label="系数">
</el-table-column>
<el-table-column
prop="startTime"
label="起始时间">
</el-table-column>
<el-table-column
prop="startGross"
label="起始示数">
</el-table-column>
<el-table-column
prop="endTime"
label="结束时间">
</el-table-column>
<el-table-column
prop="endGross"
label="结束示数">
</el-table-column>
<el-table-column v-if="detailFlag" v-for="(value, key) in groupTableData[0].reportDynamicTableDataVoList[0].detailList"
:key="key">
<template slot="header">
{{ value.title }}
</template>
<template slot-scope="scope">{{ scope.row.detailList[key] && scope.row.detailList[key].grossValue}}</template>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import API from "@/api/api";
import dayjs from "dayjs";
@Component({
props: [],
components: {},
})
export default class dynamicReportTable extends Vue {
API_SERVICE: any = API.systemSetting;
reportTemplateOptions: Array<any> = [];
groupTableData: Array<any> = []
detailFlag:boolean = true;
''
reportForm: any = {
reportId: 1,
time: ''
};
dateType: string = 'year';
created() {
this.getReportTemplateList()
}
mounted() {
}
/**
* 获取动态报表模板
*/
getReportTemplateList() {
this.reportTemplateOptions = [];
this.API_SERVICE.getReportDynamicTemplateList().then((res) => {
if (res.code == 200) {
this.reportForm.reportId = res.data[0].id
if (res.data[0].queryDateType == 1) {
this.dateType = 'year'
this.reportForm.time = dayjs()
} else if (res.data.queryDateType == 2) {
this.dateType = 'month'
this.reportForm.time = dayjs()
} else {
this.dateType = 'daterange'
this.reportForm.time = []
this.reportForm.time.push(dayjs().startOf("month"))
this.reportForm.time.push(dayjs())
}
res.data.forEach(x => {
this.reportTemplateOptions.push(
{
value: x.id,
label: x.name
}
)
})
}
})
}
/**
* 选择模板的事件
*/
changeValue() {
let params = {id: this.reportForm.reportId};
this.API_SERVICE.getReportDynamic(params).then((res) => {
if (res.code == 200) {
if (res.data.queryDateType == 1) {
this.dateType = 'year'
this.reportForm.time = dayjs()
} else if (res.data.queryDateType == 2) {
this.dateType = 'month'
this.reportForm.time = dayjs()
} else {
this.dateType = 'daterange'
this.reportForm.time = []
this.reportForm.time.push(dayjs().startOf("month"))
this.reportForm.time.push(dayjs())
}
}
})
}
/**
* 选择模板后加载数据
*/
loadTemplateData() {
let time = '';
if (this.dateType == 'daterange') {
let startTime = dayjs(this.reportForm.time[0]).format("YYYY-MM-DD");
let endTime = dayjs(this.reportForm.time[1]).format("YYYY-MM-DD");
time = startTime + '%' + endTime;
} else {
time = dayjs(this.reportForm.time).format("YYYY-MM-DD");
}
let requestParam = {
reportId: this.reportForm.reportId,
time: time
}
this.API_SERVICE.queryReportGroupDataList(requestParam).then((res) => {
if (res.code == 200) {
console.log(res.data)
this.groupTableData = res.data
}
})
}
}
</script>
<style scoped>
</style>
