使用el-table表格展示检验数据

本文介绍如何使用el-table表格展示检验数据，并提供示例代码和数据转换函数。

数据格式

假设我们的检验数据以以下格式存储：

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

数据转换

为了适应el-table表格的数据格式，我们需要将数据进行转换。可以使用以下函数将数据转换为适应el-table表格的数据格式：

function convertData(data) {
  const result = [];
  
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    const key = Object.keys(item)[0];
    const values = item[key];
    
    const row = {
      name: key,
      inspectCount: values['检验数量'],
      qualifiedCount: values['合格数量'],
      defectiveCount: values['不良数量']
    };
    
    result.push(row);
  }
  
  return result;
}

const convertedData = convertData(a);
console.log(convertedData);

输出结果为：

[
  {
    "name": "一检",
    "inspectCount": 34,
    "qualifiedCount": 12,
    "defectiveCount": 22
  },
  {
    "name": "二检",
    "inspectCount": 31,
    "qualifiedCount": 10,
    "defectiveCount": 21
  },
  {
    "name": "三检",
    "inspectCount": 13,
    "qualifiedCount": 13,
    "defectiveCount": 0
  }
]

使用el-table表格

你可以将convertedData作为el-table组件的数据源。

<template>
  <el-table :data="convertedData">
    <el-table-column prop="name" label="检验名称" />
    <el-table-column prop="inspectCount" label="检验数量" />
    <el-table-column prop="qualifiedCount" label="合格数量" />
    <el-table-column prop="defectiveCount" label="不良数量" />
  </el-table>
</template>

<script>
import { convertData } from './data-conversion'; // 引入数据转换函数

export default {
  data() {
    return {
      a: [
        // ... your data
      ],
      convertedData: convertData(this.a)
    };
  }
};
</script>

总结

本文介绍了如何使用el-table表格展示检验数据，并提供了数据转换函数和示例代码。希望对你有所帮助。