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

咸鱼妹妹2024-09-14 8:23

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;
      }, []);
    },
  },
};