如何使用vue js以表格形式Map数据？

h7wcgrx3 于 2023-01-14 发布在 Vue.js

关注(0)|答案(1)|浏览(281)

这是以表格形式显示数据的数据格式

transformedData=
    {
          missingReports: [
            {
              empId: "1234",
              empName: "Aarohi",
              monthTotalHours: {
                11-2022:{ allocation: 32, totalHoursMissing: 6, difference: 21 },
                12-2022:{ allocation: 91, totalHoursMissing: 3, difference: 45 }
              }
            },
            {
              empId: "2345",
              empName: "Aarush",
              monthTotalHours: {
               11-2022: {allocation:10, totalHoursMissing: 2, difference: 21 }
              }
            }
          ]
        }

这就是我希望以表格形式输出的方式

EmpId   EmpName  Nov2022al  Nov2022hr  Nov2022dif   Dec2022al  Dec2022hr  Dec2022dif
                                                                              

1234     Aarohi  32         6           21          91         3              45
2345     Aarush  10         2           21

这是我一直尝试到现在。这里getTableHeader是我们从日期选择器中选择后得到的月份-年份。

<template v-for="employee in transformedData">
             <tr v-for="data in employee" :key="data.empId">
               <!-- <tr v-for="item in data" :key="item.empId"> -->
                 <!-- <template v-for="(item,index) in data"> -->
              <td class="td-empId">{{ data.empId }}</td>
              <td class="td-empName">{{ data.empName }}</td>
              <template
                v-for="(date, dIndex) in getTableHeader"
              >
                 <span v-for="(monthTotalHours, mIndex) in Object.values(data.monthTotalHours)" :key="mIndex">
                   <td :key="'TT' + dIndex">{{monthTotalHours.allocation | decimalFix}}</td>
                   <td :key="'DD' + dIndex">{{monthTotalHours.totalHoursMissing | decimalFix}}</td>
                   <td :key="'DDD' + dIndex">{{monthTotalHours.difference | decimalFix}}</td>
                 </span>
             </template>
           </tr>
    </template>

vue.js

来源：https://stackoverflow.com/questions/75080630/how-to-map-data-using-vue-js-in-table-form

1条答案

按热度按时间

igetnqfo1#

首先，您必须创建一个包含所有可用标头的数组，该数组是动态的，因为它可以根据monthTotalHours数据而变化
您可以使用此代码使其易于使用

const missingReports = [
  {
    empId: "1234",
    empName: "Aarohi",
    monthTotalHours: {
      "11-2022": { allocation: 32, totalHoursMissing: 6, difference: 21 },
      "12-2022": { allocation: 91, totalHoursMissing: 3, difference: 45 }
    }
  },
  {
    empId: "2345",
    empName: "Aarush",
    monthTotalHours: {
      "11-2022": { allocation: 10, totalHoursMissing: 2, difference: 21 }
    }
  }
];

const headers = ["empId", "empName"];
const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
];

const transformed_data = missingReports.map((report) => {
  // add columns to header;
  let rprt = {
    empId: report.empId,
    empName: report.empName
  };

  for (const date in report.monthTotalHours) {
    let [month, year] = date.split("-");
    let column_prefx = `${months[month - 1]}${year}`;
    let columns = [
      `${column_prefx}al`,
      `${column_prefx}hr`,
      `${column_prefx}dif`
    ];
    if (!headers.includes(columns[0])) {
      headers.push(...columns);
    }
    // add value with generated column name to the report
    const date_data = {
      [columns[0]]: report.monthTotalHours[date].allocation,
      [columns[1]]: report.monthTotalHours[date].totalHoursMissing,
      [columns[2]]: report.monthTotalHours[date].difference
    };
    rprt = { ...rprt, ...date_data };
  }

  return rprt;
});

console.log(transformed_data)
console.log(headers)

现在，由于您事先已经有了所有的标题，因此您可以简单地打印这些标题
棘手的部分来了。
我对数据进行了转换，以便monthTotalHours.date.allocation可以作为Nov2022hr使用，这将反映标题名称
因此，您需要运行2个循环，一个用于报告，在该循环中运行另一个用于标题的循环，您将从中获得标题名称
然后您可以像这样打印数据，例如report[header name]
当然，你也必须使用循环来打印头文件名。
例如用于表格印刷

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div>

  <table>
    <tr>
      <th v-for="header in headers">
        {{header}}
      </th>
    </tr>
  
  <tbody>
    <tr v-for="report in transformed_data">
      <td v-for="header in headers">
        {{report[header]}}
      </td>
    </tr>
  </tbody>
  </table>
</div>

赞(0）回复(0）举报 2023-01-14

我来回答

如何使用vue js以表格形式Map数据？

1条答案

相关问题

热门标签

最新问答