【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;
      }, []);
    },
  },
};
相关推荐
非凡ghost5 分钟前
Affinity Photo(图像编辑软件) 多语便携版
前端·javascript·后端
非凡ghost7 分钟前
VideoProc Converter AI(视频转换软件) 多语便携版
前端·javascript·后端
endlesskiller13 分钟前
3年前我不会实现的,现在靠ai辅助实现了
前端·javascript
用户9047066835715 分钟前
commonjs的本质
前端
Zyx200719 分钟前
用 JavaScript 打造 AI 大脑:前端开发者的新时代——基于 Brain.js 的浏览器端 NLP 实战
javascript·机器学习
Sailing23 分钟前
5分钟搞定 DeepSeek API 配置:从配置到调用一步到位
前端·openai·ai编程
麦麦大数据24 分钟前
F035 vue+neo4j中医南药药膳知识图谱可视化系统 | vue+flask
vue.js·知识图谱·neo4j·中医·中药·药膳·南药
Pa2sw0rd丶26 分钟前
如何在 React 中实现键盘快捷键管理器以提升用户体验
前端·react.js
麦麦大数据31 分钟前
F037 vue+neo4j 编程语言知识图谱可视化分析系统vue+flask+neo4j
vue.js·flask·知识图谱·neo4j·可视化·编程语言知识图谱
非凡ghost42 分钟前
ToDoList(开源待办事项列表) 中文绿色版
前端·javascript·后端