(vue) Obtenga el recorrido clave del objeto y haga un bucle en la página de la pestaña para mostrar la clave y el contenido

(vue) Obtenga el recorrido clave del objeto y haga un bucle en la página de la pestaña para mostrar la clave y el contenido

---

Efecto:

estructura de datos:

"statusData": {
    
    
        "订购广度": [                                  
            {
    
    
                "id": 11, 
                "ztName": "广",                       
                ... 
            }, 
            {
    
    
                "id": 12,  
                "ztName": "较广", 
                ...
            }, 
        ],
        "需求强度": [
            {
    
    
                "id": 21,  
                "ztName": "强", 
                ...
            }, 
            {
    
    
                "id": 22,  
                "ztName": "弱", 
                ...
            }, 
        ],
        ...
   }     

código:

<el-tabs v-model="activeName" @tab-click="handleClick">
  <el-tab-pane label="状态查看" name="first">
    <el-tabs type="border-card">
      // Object.keys(statusData) 获取对象的键（key）： ['订购广度', '需求强度', '动销速度', '市场状态', '贡献度', '异常信息']
      <el-tab-pane :label="item" v-for="(item,index) in Object.keys(statusData)" :key="index">
        <el-table
          :data="statusData[item]"
          ...
        >
          <el-table-column type="index" label="序号" align="center" />
          ...
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-tab-pane>
  <el-tab-pane label="状态编辑" name="second">
     ...
  </el-tab-pane>
</el-tabs>