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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值