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