需求：渲染一个表格，根据下拉菜单里面的条件做筛选。每个条件背后的数据模型各有差异，如何实现根据条件动态的渲染表头和内容呢？-灵析社区

现有两个查询条件，一个是日期时间,一个是下拉菜单选项。 条件选择部分的ui： 查询 下拉菜单：  数据源alldata: 每个条件对应的数据模型前几个字段相同，区别于data字段 async getAllData () { this.allData = [ { id: '0', bar_no: '#P003844002672#v1', process_no: 'OP30', do_time: '2023-09-12 14:23:34', ok_flag: 'OK', ng_msg: '1111', data001: 'right' }, { id: '1', bar_no: '#P003844002672#v0', process_no: 'OP50-1', do_time: '2023-09-13 11:23:34', ok_flag: 'OK', ng_msg: '1111', data001: 'right', data002:'OK', data003: 'right', }, { id: '2', bar_no: '#P003844002672#v2', process_no: 'OP70-1', do_time: '2023-09-14 10:23:34', ok_flag: 'OK', ng_msg: '1111', data001: 'right', data002: 'right', data003:'OK', data004:'OK', data005:'OK', data006:'OK', data007:'OK', }, { id: '3', bar_no: '#P003844002672#v3', process_no: 'OP90_temp2', do_time: '2023-09-15 13:23:34', ok_flag: 'OK', ng_msg: '1111', data001: 'right', data002: 'right', data003: 'right', data004: 'right', } ] 希望选中某一个工位后能够根据它对应的数据模型渲染出表头和内容。 这是我自己的解决办法，前提是所有数据模型都相同的情况： getCols () { const col = Object.keys(this.allData[0]).map(item => { return ({ prop: item, label: item }) })