Element的table组件动态表头,展示复杂数据

问题描述

问题来自于后端希望我根据她返回的数据结构展示列表信息;
数据结构如下两张图:

• 条目列表,包含条目Key(entry_key)和条目值列表(entry_value_list)
  

• 语言列表, language_list
  

• 需要根据entry_value_list和language_list列表的相同字段language_code,决定表头language_name和内容entry_value的展示.

实现方式

• 获取语言列表language_list,for循环el-table-column
• 使用表头插槽展示所有language_name
• 循环条目值列表entry_value_list, 展示language_code相等的entry_value

 <el-table-column
        v-for="code in language_list.options"
        :key="code"
        align="center"
      >
        <template slot="header">
          {{ code.language_name }}
        </template>
        <template slot-scope="scope">
          <span v-for="value in scope.row.entry_value_list" :key="value">
            {{
              value.language_code === code.language_code
                ? value.entry_value
                : ""
            }}
          </span>
        </template>
      </el-table-column>