(vue)获取对象的键遍历，同时循环el-tab页展示key及内容

nyf_unknown

已于 2023-08-08 16:28:44 修改

阅读量1.8k

点赞数 1

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2023-08-08 16:21:03 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/132169069

版权

VUE 专栏收录该内容

181 篇文章 2 订阅

订阅专栏

(vue)获取对象的键遍历，同时循环el-tab页展示key及内容

效果：
在这里插入图片描述

数据结构：

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

代码：

<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>