【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;
      }, []);
    },
  },
};
相关推荐
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙15 小时前
[译] Composition in CSS
前端·css
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix15 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780015 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端15 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧15 小时前
Promise 的使用
前端·javascript
NBtab15 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端