vue.js erp管理系统

<template>
  <div>
    <h1>财务概览</h1>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>收入</th>
          <th>支出</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="transaction in transactions" :key="transaction.id">
          <td>{{ transaction.date }}</td>
          <td>{{ transaction.income }}</td>
          <td>{{ transaction.expense }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      transactions: []
    };
  },
  created() {
    this.fetchTransactions();
  },
  methods: {
    fetchTransactions() {
      // 假设这里是从后端API获取交易数据的逻辑
      this.transactions = [
        { id: 1, date: '2023-04-01', income: 1000, expense: 500 },
        { id: 2, date: '2023-04-02', income: 1500, expense: 700 }
      ];
    }
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>