【Vue嵌套数据中,实现动态表头和内容】

el-table中,表头和内容是动态的。表头名称取数组对象tableData中的crb.name、dcpg.name等等。表头为空,不显示这一列。内容取的是数组对象tableData中的crb.count、dcpg.count等等。tableData = [ { crb: { name:'矫正状态: 在矫(数里)', count: 1, }, dcpg: { name:'矫正状态', count: 11111, } }, ]

复制代码
<el-table :data="tableData" style="width: 100%">
  <el-table-column
    v-for="(item, index) in listLabel"
    :key="index"
    :prop="item.prop"
    :label="item.label"
  ></el-table-column>
</el-table>

export default {
  data() {
    return {
      tableData: [
        {
          crb: { name: '姓名: ', count: 100 },
          dcpg: { name: '爱好', count: 200 },
        },
         {
          crb: { name: '姓名: ', count: 300 },
          dcpg: { name: '爱好', count: 400 },
        },
        // 更多数据...
      ],
      listLabel: [],
    };
  },
  mounted() {
    this.generateTableHeader();
  },
  methods: {
    generateTableHeader() {
      const keys = ['crb', 'dcpg']; // 定义你想从每个对象中提取的键
      const seenKeys = new Set(); // 用于跟踪已经处理过的键
      this.listLabel = this.tableData.reduce((acc, item) => {
        keys.forEach((key) => {
          if (item[key] && item[key].name && !seenKeys.has(key)) {
            acc.push({ label: item[key].name, prop: key + '.count' });
            seenKeys.add(key); // 将处理过的键添加到集合中
          }
        });
        return acc;
      }, []);
    },
  },
};
相关推荐
半夏陌离6 分钟前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw23 分钟前
鸿蒙工程版本与设备版本不匹配
前端
gnip30 分钟前
http缓存
前端·javascript
我不只是切图仔1 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
JohnYan1 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
该用户已不存在2 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api2 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
陈陈爱java2 小时前
Spring八股文
开发语言·javascript·数据库
布列瑟农的星空2 小时前
大话设计模式——观察者模式和发布/订阅模式的区别
前端·后端·架构
龙在天2 小时前
Vue3 实现 B站 视差 动画
前端