You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
1.9 KiB
100 lines
1.9 KiB
<template>
|
|
<div>
|
|
<table>
|
|
<tr class="table-header">
|
|
<td class="name">任务名称</td>
|
|
<td>预算(元)</td>
|
|
<td>奖金(元)</td>
|
|
</tr>
|
|
<tr v-for="item in arrayData">
|
|
<td>{{item.name}}</td>
|
|
<td>{{item.budget}}</td>
|
|
<td>{{item.bonus}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>合计</td>
|
|
<td>{{sumBudget}}</td>
|
|
<td>{{sumBonus}}</td>
|
|
</tr>
|
|
</table>
|
|
<div class="pagination">
|
|
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref} from'vue'
|
|
const arrayData = ref([
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:1000,
|
|
bonus:0
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:200
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:1000,
|
|
bonus:0
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:200
|
|
}
|
|
]);
|
|
const sumBudget = arrayData.value.reduce((sum, e) => sum + e.budget, 0);
|
|
const sumBonus = arrayData.value.reduce((sum, e) => sum + e.bonus, 0);
|
|
const currentPage = ref(1);
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
table {
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
font-size: 14px;
|
|
overflow-x: scroll;
|
|
color:#797878 ;
|
|
td {
|
|
border: 0.5px solid #ccc;
|
|
padding: 0.85rem 0 0.85rem 0.85rem;
|
|
}
|
|
.table-header{
|
|
background-color: #F2F2F2;
|
|
color: #A0A0A0;
|
|
}
|
|
.name{
|
|
width:50%
|
|
}
|
|
}
|
|
.pagination{
|
|
width:50%;
|
|
margin-left: 50%;
|
|
margin-top:1rem
|
|
}
|
|
|
|
</style>
|
|
|