vue vuetify v-table 表头随后台传来的数据变化

vue vuetify v-table 表头随后台传来的数据变化

因为最近在做基因的相关性分析页面，想要把分析结果存入前端的表格，但由于选定的基因个数和基因名都不固定，就想要做表头可以随后台数据长短变化

先看一下vuetify 组件给出的表头格式

 headers: [
       
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' },
        ],
  

官方文档并未给出相关方法
但我们可以看出这是一个列表，里面的元素是字典
那只要构造出这样的格式就可以了

下面是后台的python代码，js应该也可以

gene_list = ['A1BG', 'A1BG-AS1', 'A1CF', 'A2M', 'A2M-AS1', 'A2ML1', 'A2MP1', 'A4GALT', 'A4GNT',]
gene_header = []
for i in range(len(gene_list)):
    key_list = ['text','value']
    gene = [gene_list[i],gene_list[i]]
    gene_h = dict(zip(key_list,gene))
    gene_header.append(gene_h)
print(gene_header)

结果

[{'text': 'A1BG', 'value': 'A1BG'}, {'text': 'A1BG-AS1', 'value': 'A1BG-AS1'}, {'text': 'A1CF', 'value': 'A1CF'}, {'text': 'A2M', 'value': 'A2M'}, {'text': 'A2M-AS1', 'value': 'A2M-AS1'}, {'text': 'A2ML1', 'value': 'A2ML1'}, {'text': 'A2MP1', 'value': 'A2MP1'}, {'text': 'A4GALT', 'value': 'A4GALT'}, {'text': 'A4GNT', 'value': 'A4GNT'}]

离我需要的格式只多了两个单引号
删掉就好

gene_header1 = str(gene_header)#先把列表转换成字符串"
print(gene_header1.replace("{'","{").replace("':",":").replace(", '",", "))

结果

[{text: 'A1BG', value: 'A1BG'}, {text: 'A1BG-AS1', value: 'A1BG-AS1'}, {text: 'A1CF', value: 'A1CF'}, {text: 'A2M', value: 'A2M'}, {text: 'A2M-AS1', value: 'A2M-AS1'}, {text: 'A2ML1', value: 'A2ML1'}, {text: 'A2MP1', value: 'A2MP1'}, {text: 'A4GALT', value: 'A4GALT'}, {text: 'A4GNT', value: 'A4GNT'}]

前端接收到这个字符串，去掉两边的引号，直接赋给header参数就行