如何在Vue CLI中遍历Java枚举数据并渲染展示报表

1. Vue中直接导入Java文件的方式是否正确？ #

直接导入.java文件完全错误。Vue CLI运行在浏览器/Node.js前端环境，仅能识别JavaScript/TypeScript等前端文件，无法解析Java代码，这种导入方式会直接导致编译失败。

2. 如何实现遍历枚举数据并渲染目标表格？ #

Java枚举运行在后端JVM环境，前端无法直接读取，需通过以下两种常见方式获取数据：

方式一：后端提供接口返回枚举数据 #

在Java后端编写接口，将DefaultFormatE枚举的所有数据转换为JSON格式返回给前端：

@GetMapping("/reports/formats")
public List<Map<String, String>> getReportFormats() {
    List<Map<String, String>> result = new ArrayList<>();
    for (DefaultFormatE format : DefaultFormatE.values()) {
        Map<String, String> item = new HashMap<>();
        item.put("reportId", format.getReportId());
        item.put("reportName", format.getReportName());
        item.put("defaultFormat", format.getDefaultFormat());
        result.add(item);
    }
    return result;
}

然后在Vue组件中通过请求获取数据并渲染表格：

<template>
  <div class="s-table-container">
    <table class="s-table">
      <thead>
        <tr>
          <th style="text-align: left;">report id</th>
          <th style="text-align: center;">report name</th>
          <th style="text-align: right;">format</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="report in reportList" :key="report.reportId">
          <td style="text-align: left;">{{ report.reportId }}</td>
          <td style="text-align: center;">{{ report.reportName }}</td>
          <td style="text-align: right;">{{ report.defaultFormat }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      reportList: []
    };
  },
  mounted() {
    this.fetchReportData();
  },
  methods: {
    async fetchReportData() {
      try {
        const response = await axios.get('/reports/formats');
        this.reportList = response.data;
      } catch (error) {
        console.error('获取报表数据失败:', error);
      }
    }
  }
};
</script>

<style>
.s-table-container {
  margin: 20px;
}
.s-table {
  width: 100%;
  border-collapse: collapse;
}
.s-table th, .s-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.s-table th {
  background-color: #f2f2f2;
}
</style>

方式二：手动同步枚举数据到前端JS文件 #

如果枚举数据不频繁变动，可以手动将枚举内容转为前端JavaScript数组，创建reportEnums.js文件：

export const reportEnums = [
  { reportId: 'Report001', defaultFormat: 'HTML', reportName: 'ReportName001' },
  { reportId: 'Report002', defaultFormat: 'PDF', reportName: 'ReportName002' },
  { reportId: 'Report003', defaultFormat: 'XLS', reportName: 'ReportName003' }
];

// 模拟Java枚举的getFileFormat方法
export const getFileFormat = (reportId) => {
  const match = reportEnums.find(item => item.reportId.toLowerCase() === reportId.toLowerCase());
  return match ? match.defaultFormat : null;
};

然后在Vue组件中导入并使用：

<template>
  <div class="s-table-container">
    <table class="s-table">
      <thead>
        <tr>
          <th style="text-align: left;">report id</th>
          <th style="text-align: center;">report name</th>
          <th style="text-align: right;">format</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="report in reportList" :key="report.reportId">
          <td style="text-align: left;">{{ report.reportId }}</td>
          <td style="text-align: center;">{{ report.reportName }}</td>
          <td style="text-align: right;">{{ report.defaultFormat }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { reportEnums } from '../enum/reportEnums';

export default {
  data() {
    return {
      reportList: reportEnums
    };
  }
};
</script>

<style>
.s-table-container {
  margin: 20px;
}
.s-table {
  width: 100%;
  border-collapse: collapse;
}
.s-table th, .s-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.s-table th {
  background-color: #f2f2f2;
}
</style>

总结 #

• 前端无法直接读取Java文件，必须通过后端接口或手动同步数据的方式获取枚举内容
• 优先选择后端接口方案，能保证前后端数据一致性，枚举变动时无需手动修改前端代码

内容的提问来源于stack exchange，提问作者ka hei tong