以下是一个使用 **
Vue 3（Composition API + `<script setup>`）** 和 **
Element Plus** 构建的简单财务报表页面的完整实现。该页面包含：
- 表格展示财务数据（收入、支出、利润等）
- 搜索与筛选功能
- 合计行显示
- 响应式布局
---
### ✅ 技术栈说明：
- Vue 3（`<script setup>` 语法糖）
- Element Plus 组件库
- Vite（推荐构建工具）
---
## ✅ 完整代码：`FinancialReport
.vue`
```
vue
<script setup>
import { ref, computed } from '
vue'
// 财务数据模拟
const financialData = ref([
{ id: 1, date: '2024
-01', income: 50000, expense: 30000, profit: 20000, department: '销售部' },
{ id: 2, date: '2024
-02', income: 60000, expense: 35000, profit: 25000, department: '技术部' },
{ id: 3, date: '2024
-03', income: 55000, expense: 40000, profit: 15000, department: '市场部' },
{ id: 4, date: '2024
-04', income: 70000, expense: 45000, profit: 25000, department: '销售部' },
{ id: 5, date: '2024
-05', income: 65000, expense: 38000, profit: 27000, department: '技术部' }
])
// 筛选条件
const filters = ref({
date: '',
department: ''
})
// 可选部门列表（用于下拉筛选）
const departments = ['销售部', '技术部', '市场部']
// 计算属性：根据筛选条件过滤数据
const filteredData = computed(() => {
return financialData
.value
.filter(item => {
const matchDate = !filters
.value
.date || item
.date
.includes(filters
.value
.date)
const matchDept = !filters
.value
.department || item
.department === filters
.value
.department
return matchDate && matchDept
})
})
// 计算合计
const totals = computed(() => {
return filteredData
.value
.reduce(
(acc, cur) => {
acc
.income += cur
.income
acc
.expense += cur
.expense
acc
.profit += cur
.profit
return acc
},
{ income: 0, expense: 0, profit: 0 }
)
})
</script>
<template>
<div style="padding: 20px">
<h2>财务报表</h2>
<!
-- 筛选区域
-->
<el
-form :inline="true" :model="filters" style="margin
-bottom: 20px">
<el
-form
-item label="
月份">
<el
-input v
-model="filters
.date" placeholder="输入
年月，如 2024
-01" clearable />
</el
-form
-item>
<el
-form
-item label="部门">
<el
-select v
-model="filters
.department" placeholder="
选择部门" clearable>
<el
-option
v
-for="dept in departments"
:key="dept"
:label="dept"
:value="dept"
/>
</el
-select>
</el
-form
-item>
<el
-form
-item>
<el
-button type="primary" @click="() => {}">查询</el
-button>
<el
-button @click="filters = { date: '', department: '' }">重置</el
-button>
</el
-form
-item>
</el
-form>
<!
-- 数据表格
-->
<el
-table :data="filteredData" border style="width: 100%" stripe>
<el
-table
-column prop="date" label="
月份" width="120" />
<el
-table
-column prop="department" label="部门" width="120" />
<el
-table
-column prop="income" label="收入（元）" width="150">
<template #default="{ row }">
{{ row
.income
.toLocaleString() }}
</template>
</el
-table
-column>
<el
-table
-column prop="expense" label="支出（元）" width="150">
<template #default="{ row }">
{{ row
.expense
.toLocaleString() }}
</template>
</el
-table
-column>
<el
-table
-column prop="profit" label="利润（元）" width="150">
<template #default="{ row }">
<span :style="{ color: row
.profit >= 0 ? 'green' : 'red' }">
{{ row
.profit
.toLocaleString() }}
</span>
</template>
</el
-table
-column>
</el
-table>
<!
-- 合计行
-->
<el
-table :data="[totals]" style="margin
-top: 10px; width: 100%" size="small" show
-summary sum
-text="总计">
<el
-table
-column label="总计" width="120">
<template #default>
<strong>总计</strong>
</template>
</el
-table
-column>
<el
-table
-column></el
-table
-column>
<el
-table
-column prop="income" label="收入（元）">
<template #default="{ row }">{{ row
.income
.toLocaleString() }}</template>
</el
-table
-column>
<el
-table
-column prop="expense" label="支出（元）">
<template #default="{ row }">{{ row
.expense
.toLocaleString() }}</template>
</el
-table
-column>
<el
-table
-column prop="profit" label="利润（元）">
<template #default="{ row }">
<strong :style="{ color: row
.profit >= 0 ? 'green' : 'red' }">
{{ row
.profit
.toLocaleString() }}
</strong>
</template>
</el
-table
-column>
</el
-table>
</div>
</template>
<style scoped>
h2 {
margin
-bottom: 20px;
color: #333;
}
.el
-table {
font
-size: 14px;
}
</style>
```
---
## 🔍 解释说明：
1
. **响应式数据管理**：
- 使用 `ref` 定义可响应的数据和筛选条件。
- 使用 `computed` 实现自动更新的过滤结果和合计值。
2
. **
Element Plus 组件使用**：
- `el
-form` + `el
-input` / `el
-select`：实现筛选表单。
- `el
-table`：展示财务数据，支持格式化金额、颜色标记利润正负。
- `show
-summary` 属性本可用于内置合计，但这里我们自定义一个表格更灵活控制样式。
3
. **金额格式化**：
- 使用 `toLocaleString()` 添加千分位分隔符。
4
. **利润颜色区分**：
- 利润为正显示绿色，负为红色（虽然示例中无负利润，但已预留逻辑）。
5
. **合计行实现技巧**：
- 使用另一个只含一条数据的 `el
-table` 渲染合计行，保持风格一致。
---
## ✅ 如何在项目中使用？
确保你已安装
Vue 3 和
Element Plus：
```bash
npm install
element-plus @
element-plus/icons
-vue
```
在 `main
.js` 中引入
Element Plus：
```
js
import { createApp } from '
vue'
import App from '
./App
.vue'
import
ElementPlus from '
element-plus'
import '
element-plus/dist/index
.css'
createApp(App)
.use(
ElementPlus)
.mount('#app')
```
然后将上述 `FinancialReport
.vue` 引入到你的路由或主页面中即可。
---
该段代码展示了如何使用el-date-picker组件来选择月份，并通过v-model绑定变量selectMonth，设置type为month，placeholder为选择月份。同时，利用value-format属性将绑定的值格式化为YYYY-MM，并可以使用format属性改变日期的显示格式为YYYY–MM年月格式。
扫一扫
9224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
