【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;
      }, []);
    },
  },
};
相关推荐
山青花欲燃3106 分钟前
React 对接流式接口实现
前端·llm
LaoZhangAI8 分钟前
【2025最新】Gemini 2.5 Pro完全指南:强大推理能力提升8大应用场景实战效率
前端
平山15 分钟前
浅析JavaScript的内存机制
javascript·面试
frontDeveloper17 分钟前
JavaScript基础知识概览(非DOM-API部分)
javascript
晓风伴月18 分钟前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
Carlos_sam19 分钟前
OpenLayers:海量图形渲染之矢量切片
前端·javascript
Nexmoe20 分钟前
20 万行代码:我们如何构建和维护大规模 AI 原型系统
前端
zhangxingchao20 分钟前
Andrdoid中常用的JVM知识整理
前端
海底火旺20 分钟前
聊一聊JavaScript中的立即执行函数(IIFE)
前端·javascript
76756047920 分钟前
useMemoize 方法源码解读与实战应用
前端·源码