多层级数据结构转换为多个el-table表格数据源

将多层级数据结构转换为多个el-table表格数据源

在实际应用中，我们经常遇到多层级的数据结构，例如：

let a= [
    {
        '一检': {
            '检验数量': 34,
            '合格数量': 12,
            '不良数量': 22
        }
    },
    {
        '二检': {
            '检验数量': 31,
            '合格数量': 10,
            '不良数量': 21
        }
    },
    {
        '三检': {
            '检验数量': 13,
            '合格数量': 13,
            '不良数量': 0
        }
    }
]

如果我们希望将这种数据结构展示在多个el-table表格中，就需要将其转换为el-table表格所需的数据格式。

编写转换函数

我们可以编写一个函数，该函数接受一个列表作为参数，并将其转换为适应多个el-table表格的数据格式。以下是一个可能的实现：

def convert_to_el_table_data(data):
    result = []
    for item in data:
        for key, value in item.items():
            table_data = {
                'name': key,
                'data': [
                    {'label': '检验数量', 'value': value['检验数量']},
                    {'label': '合格数量', 'value': value['合格数量']},
                    {'label': '不良数量', 'value': value['不良数量']}
                ]
            }
            result.append(table_data)
    return result

converted_data = convert_to_el_table_data(a)
print(converted_data)

输出结果

[
    {
        'name': '一检',
        'data': [
            {'label': '检验数量', 'value': 34},
            {'label': '合格数量', 'value': 12},
            {'label': '不良数量', 'value': 22}
        ]
    },
    {
        'name': '二检',
        'data': [
            {'label': '检验数量', 'value': 31},
            {'label': '合格数量', 'value': 10},
            {'label': '不良数量', 'value': 21}
        ]
    },
    {
        'name': '三检',
        'data': [
            {'label': '检验数量', 'value': 13},
            {'label': '合格数量', 'value': 13},
            {'label': '不良数量', 'value': 0}
        ]
    }
]

使用结果

这样，你就可以将converted_data作为多个el-table表格的数据源。每个表格可以使用name作为标题，data作为表格的行数据。

例如，你可以使用以下代码创建三个el-table表格：

<template v-for='(item, index) in converted_data' :key='index'>
  <el-table :data='item.data' :title='item.name' stripe>
    <el-table-column prop='label' label='指标' width='120'></el-table-column>
    <el-table-column prop='value' label='数值'></el-table-column>
  </el-table>
</template>

总结

通过上述方法，我们可以将多层级数据结构转换为适应多个el-table表格的数据格式，方便用户理解和分析数据。