vue工资页面实现

Vue工资页面实现

数据绑定与展示

使用Vue的响应式数据绑定功能展示工资信息。在data中定义工资相关数据，如基本工资、奖金、扣款等，通过模板语法展示。

<template>
  <div>
    <h3>工资明细</h3>
    <p>基本工资: {{ baseSalary }}</p>
    <p>奖金: {{ bonus }}</p>
    <p>扣款: {{ deduction }}</p>
    <p>实发工资: {{ actualSalary }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseSalary: 8000,
      bonus: 2000,
      deduction: 500
    };
  },
  computed: {
    actualSalary() {
      return this.baseSalary + this.bonus - this.deduction;
    }
  }
};
</script>

表单输入与计算

添加表单输入功能，允许用户修改工资项。使用v-model实现双向绑定，实时计算实发工资。

<template>
  <div>
    <h3>工资计算器</h3>
    <label>基本工资: <input v-model.number="baseSalary" type="number"></label>
    <label>奖金: <input v-model.number="bonus" type="number"></label>
    <label>扣款: <input v-model.number="deduction" type="number"></label>
    <p>实发工资: {{ actualSalary }}</p>
  </div>
</template>

工资列表展示

如需展示多个月份工资，可使用v-for循环渲染列表，配合表格展示更清晰。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>月份</th>
          <th>基本工资</th>
          <th>奖金</th>
          <th>扣款</th>
          <th>实发工资</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in salaryList" :key="index">
          <td>{{ item.month }}</td>
          <td>{{ item.baseSalary }}</td>
          <td>{{ item.bonus }}</td>
          <td>{{ item.deduction }}</td>
          <td>{{ item.baseSalary + item.bonus - item.deduction }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      salaryList: [
        { month: '2023-01', baseSalary: 8000, bonus: 2000, deduction: 500 },
        { month: '2023-02', baseSalary: 8000, bonus: 2500, deduction: 300 }
      ]
    };
  }
};
</script>

图表展示

使用Echarts等图表库可视化展示工资变化趋势，安装echarts后，在mounted钩子中初始化图表。

<template>
  <div>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    chart.setOption({
      xAxis: {
        type: 'category',
        data: this.salaryList.map(item => item.month)
      },
      yAxis: { type: 'value' },
      series: [{
        data: this.salaryList.map(item => item.baseSalary + item.bonus - item.deduction),
        type: 'line'
      }]
    });
  }
};
</script>

数据持久化

通过axios调用API获取工资数据，或使用localStorage实现本地存储。

<script>
import axios from 'axios';
export default {
  data() {
    return {
      salaryData: []
    };
  },
  async created() {
    const response = await axios.get('/api/salary');
    this.salaryData = response.data;
  }
};
</script>

组件化开发

将工资页面拆分为多个组件，如工资概要、明细列表、图表展示等，提高代码复用性和可维护性。

<template>
  <div>
    <SalarySummary :data="summaryData" />
    <SalaryList :items="salaryItems" />
    <SalaryChart :data="chartData" />
  </div>
</template>

以上实现方式可根据实际需求调整，结合Vuex状态管理或Pinia处理复杂状态，使用路由实现多页面导航。样式部分可使用CSS预处理器或UI框架如Element UI快速搭建界面。