vue的dom组件绑定数据层级太深，数据渲染出来了，但是控制台报

问题描述：

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>