VUE3中Element table表头动态展示合计信息（不是表尾合计）

一、背景 

原型上需要对两个字段动态合计，输出摘要信息

原先想到是的Element的 :summary-method，发现不是动态，所以换监听来实现

二、vue代码

   <el-table v-model="loading" :data="itemList"><el-table-column label="药品名称" prop="drugName" fixed min-width="100px" :show-overflow-tooltip="true"/><el-table-column label="规格" prop="drugSpec" :show-overflow-tooltip="true"/><el-table-column label="批号" prop="batchNo" :show-overflow-tooltip="true"/><el-table-column label="账面数" prop="batchStockDesc" min-width="90px"/><el-table-column label="盘存数" align="center"><el-table-column prop="stocktakeQty" min-width="150px"><template v-slot="scope"><el-input-number :disabled="!canEdit"v-model="scope.row.stocktakeQty":min="0"controls-position="right"size="small"/></template></el-table-column><el-table-column label="单位" prop="unit" min-width="90px"><template #default="scope"><dict-tag :options="bd_plat_drug_unit" :value="scope.row.unit" :showValue="false"/></template></el-table-column><el-table-column prop="stocktakeTinyqty" min-width="150px"><template v-slot="scope"><el-input-number :disabled="!canEdit"v-model="scope.row.stocktakeTinyqty":min="0"controls-position="right"size="small"/></template></el-table-column><el-table-column label="小单位" prop="tinyUnit" min-width="90px"><template #default="scope"><dict-tag :options="bd_plat_drug_unit" :value="scope.row.tinyUnit" :showValue="false"/></template></el-table-column></el-table-column><el-table-column label="零售" align="center"><el-table-column label="零售价" prop="retailPrice" min-width="100px" :show-overflow-tooltip="true"align="right"/><el-table-column label="盘前金额" prop="totalRetail" min-width="100px" :show-overflow-tooltip="true"align="right"/><el-table-column label="盘后金额" prop="afterTotalRetail" min-width="100px" :show-overflow-tooltip="true"align="right"><template v-slot="scope">{{scope.row.afterTotalRetail = computeTotalMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.retailPrice)}}</template></el-table-column><el-table-column label="成本损溢金额" prop="totalLossoverRetail" min-width="120px" align="right"><template v-slot="scope">{{scope.row.totalLossoverRetail = computeDifferenceMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.retailPrice, scope.row.totalRetail)}}</template></el-table-column></el-table-column><el-table-column label="成本" align="center"><el-table-column label="采购价" prop="purchasePrice" min-width="100px" :show-overflow-tooltip="true"align="right"/><el-table-column label="盘前金额" prop="totalPurchase" min-width="100px" :show-overflow-tooltip="true"align="right"/><el-table-column label="盘后金额" prop="afterTotalPurchase" min-width="100px" :show-overflow-tooltip="true"align="right"><template v-slot="scope">{{scope.row.afterTotalPurchase = computeTotalMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.purchasePrice)}}</template></el-table-column><el-table-column label="成本损溢金额" prop="totalLossoverPurchase" min-width="120px":show-overflow-tooltip="true" align="right"><template v-slot="scope">{{scope.row.totalLossoverPurchase = computeDifferenceMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.purchasePrice, scope.row.totalPurchase)}}</template></el-table-column></el-table-column><el-table-column label="生产企业" prop="firmName" min-width="80px" :show-overflow-tooltip="true"/><el-table-column label="产地" prop="producerName" min-width="80px" :show-overflow-tooltip="true"/><el-table-column label="库位码" prop="locationCode" min-width="100px" :show-overflow-tooltip="true"/><el-table-column label="操作" fixed="right" min-width="60px" align="center" v-if="canEdit"class-name="small-padding fixed-width"><template #default="scope"><el-button link type="primary" icon="Delete" title="删除" @click="handleDelete(scope.row)"/></template></el-table-column></el-table>

  其中代码，赋值给totalLossoverRetail 才能保证，后期监听时数据有发生变化

                {{scope.row.totalLossoverRetail = computeDifferenceMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.retailPrice, scope.row.totalRetail)}}

三、方法代码

watch(itemList, () => {console.log(itemList.value, 'itemList')let totalLossoverRetail = 0let totalLossoverPurchase = 0itemList.value.forEach(item => {totalLossoverRetail = Number(totalLossoverRetail) + Number(item.totalLossoverRetail);totalLossoverPurchase = Number(totalLossoverPurchase) + Number(item.totalLossoverPurchase);})sumDescription.value = '成本损溢金额 ' + totalLossoverPurchase + ' 零售损溢金额  ' + totalLossoverRetail
}, {deep: true});

其中开启深度监听

四、效果