使用vue动态求和,我是写死代码的,这样后期维护会很繁琐,所以想问问有没有什么好方法,把计算单独拎出来,又能随之值的修改,总之一起改变?
<tbody>
<tr v-for="(item, index) in listData" :key="item.mobile" class="table-list">
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><span>{{ index+1 }}</span></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'">{{ item.userName }}</td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><span v-if="item.departments!=undefined">{{ item.departments.join() }}</span></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.baseSalaryStr " type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.performanceStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.postSalaryStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.manageEncourageStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.skillSalaryStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.senioritySalaryStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.externalEncourageStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.commissionStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'">
<input :readonly="readonly" class="price-ipt" style="color:blue;" :value="(Number(item.baseSalaryStr)+ Number(item.performanceStr)+Number(item.postSalaryStr)+Number(item.manageEncourageStr)+Number(item.skillSalaryStr)+Number(item.senioritySalaryStr)+Number(item.externalEncourageStr)+Number(item.commissionStr))?(Number(item.baseSalaryStr)+ Number(item.performanceStr)+Number(item.postSalaryStr)+Number(item.manageEncourageStr)+Number(item.skillSalaryStr)+Number(item.senioritySalaryStr)+Number(item.externalEncourageStr)+Number(item.commissionStr)):'0.00'">
</td>
<td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.socialSecurityStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
<td :class="item.ifUpdate ? 'textCenter': 'update-tr'">
<button v-if="item.ifUpdate" class="choose-btn" @click="updateInfo(index, item)">修改</button>
<button v-if="!item.ifUpdate" class="choose-btn" :disabled="item.saveBtn" @click="saveRow(index, item)">保存</button>
<button class="choose-btn" @click="cancelInfo(index, item)">取消</button>
</td>
</tr>
<tr v-if="listData.length<=0">
<td colspan="14" style="text-align: center;">-没有记录-</td>
</tr>
</tbody>