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.
109 lines
2.6 KiB
109 lines
2.6 KiB
<template>
|
|
<div>
|
|
<table class="w-full text-gray-500 mt-4 text-ms">
|
|
<tr class="bg-gray-100">
|
|
<td class="">任务名称</td>
|
|
<td class="">预算(元)</td>
|
|
<td class="">奖金(元)</td>
|
|
</tr>
|
|
<tr v-for="item in arrayData">
|
|
<td>{{item.name}}</td>
|
|
<td>
|
|
<div v-if="!item.showBudgetEdit" @click="item.showBudgetEdit = true">{{item.budget}}</div>
|
|
<van-field v-else v-model="item.budget" type="number" class="input-box" @blur="item.showBudgetEdit = false" />
|
|
</td>
|
|
<td>
|
|
<div v-if="!item.showBonusEdit" @click="item.showBonusEdit = true">{{item.bonus}}</div>
|
|
<van-field v-else v-model="item.bonus" type="number" class="input-box" @blur="item.showBonusEdit = false" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>合计</td>
|
|
<td>{{sumBudget}}</td>
|
|
<td>{{sumBonus}}</td>
|
|
</tr>
|
|
</table>
|
|
<div class="w-1/2 mt-4 ml-48">
|
|
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, reactive} from'vue'
|
|
const arrayData = ref([
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:1000,
|
|
bonus:0,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:200,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:1000,
|
|
bonus:0,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:0,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
},
|
|
{
|
|
name:'财务条插件界面设计',
|
|
budget:0,
|
|
bonus:200,
|
|
showBudgetEdit: false,
|
|
showBonusEdit: false,
|
|
}
|
|
]);
|
|
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);
|
|
const data = reactive({
|
|
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
td{
|
|
border: 0.5px solid #ccc;
|
|
padding: 0.85rem;
|
|
}
|
|
.input-box{
|
|
padding: 0!important;
|
|
border-bottom: 1px solid #ccc
|
|
}
|
|
</style>
|
|
|