解决el-table动态渲染表头出现undefined错误

2023.12.25今天我学习了如何对eb-table的动态表头出现undefined错误的处理，例如

代码如下：

<template>
    <div>
      <el-table :data="typeList">
        <el-table-column v-for="item in typeList[0]['target_data']" :label="item.target_name"/>
      </el-table>
 
     </div>
</template>

<script>
export default{
  data(){
   return {
       typeList:[],//存放表格数据
     } 
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      //例如我们需要渲染这样的表格数据
      this.typeList = ["target_data":[{id:1,target_name:"指标一"},{id:2,target_name:"指标二"}],"dep_data":[{id:1,dep_name:"科室一"},{id:2,dep_name:"科室二"}]]
    }
  }

}
</script>

会出现：

因为这个是动态渲染表头数据，vue在编译模板时无法静态的确定这个键的值，所以我们需要对一层判断：

<template>
    <div>
      <el-table :data="typeList">
        <el-table-column v-for="item typeList[0] && in typeList[0]['target_data']" :label="item.target_name" v-if="item"/>
      </el-table>
 
     </div>
</template>

<script>
export default{
  data(){
   return {
       typeList:[],//存放表格数据
     } 
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      //例如我们需要渲染这样的表格数据
      this.typeList = ["target_data":[{id:1,target_name:"指标一"},{id:2,target_name:"指标二"}],"dep_data":[{id:1,dep_name:"科室一"},{id:2,dep_name:"科室二"}]]
    }
  }

}
</script>

这样就是要先判断这个数组是否存在，然后去判断键值是否存在，就可以避免这个错误了。