常州网站建站公司,熊猫seo实战培训,济南网站制作案例,桂林人论坛电脑版一、背景 原型上需要对两个字段动态合计#xff0c;输出摘要信息 原先想到是的Element的 :summary-method#xff0c;发现不是动态#xff0c;所以换监听来实现 二、vue代码 el-table v-modelloading :dataitemListel-table-column la…一、背景 原型上需要对两个字段动态合计输出摘要信息 原先想到是的Element的 :summary-method发现不是动态所以换监听来实现 二、vue代码 el-table v-modelloading :dataitemListel-table-column label药品名称 propdrugName fixed min-width100px :show-overflow-tooltiptrue/el-table-column label规格 propdrugSpec :show-overflow-tooltiptrue/el-table-column label批号 propbatchNo :show-overflow-tooltiptrue/el-table-column label账面数 propbatchStockDesc min-width90px/el-table-column label盘存数 aligncenterel-table-column propstocktakeQty min-width150pxtemplate v-slotscopeel-input-number :disabled!canEditv-modelscope.row.stocktakeQty:min0controls-positionrightsizesmall//template/el-table-columnel-table-column label单位 propunit min-width90pxtemplate #defaultscopedict-tag :optionsbd_plat_drug_unit :valuescope.row.unit :showValuefalse//template/el-table-columnel-table-column propstocktakeTinyqty min-width150pxtemplate v-slotscopeel-input-number :disabled!canEditv-modelscope.row.stocktakeTinyqty:min0controls-positionrightsizesmall//template/el-table-columnel-table-column label小单位 proptinyUnit min-width90pxtemplate #defaultscopedict-tag :optionsbd_plat_drug_unit :valuescope.row.tinyUnit :showValuefalse//template/el-table-column/el-table-columnel-table-column label零售 aligncenterel-table-column label零售价 propretailPrice min-width100px :show-overflow-tooltiptruealignright/el-table-column label盘前金额 proptotalRetail min-width100px :show-overflow-tooltiptruealignright/el-table-column label盘后金额 propafterTotalRetail min-width100px :show-overflow-tooltiptruealignrighttemplate v-slotscope{{scope.row.afterTotalRetail computeTotalMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.retailPrice)}}/template/el-table-columnel-table-column label成本损溢金额 proptotalLossoverRetail min-width120px alignrighttemplate v-slotscope{{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-columnel-table-column label成本 aligncenterel-table-column label采购价 proppurchasePrice min-width100px :show-overflow-tooltiptruealignright/el-table-column label盘前金额 proptotalPurchase min-width100px :show-overflow-tooltiptruealignright/el-table-column label盘后金额 propafterTotalPurchase min-width100px :show-overflow-tooltiptruealignrighttemplate v-slotscope{{scope.row.afterTotalPurchase computeTotalMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.purchasePrice)}}/template/el-table-columnel-table-column label成本损溢金额 proptotalLossoverPurchase min-width120px:show-overflow-tooltiptrue alignrighttemplate v-slotscope{{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-columnel-table-column label生产企业 propfirmName min-width80px :show-overflow-tooltiptrue/el-table-column label产地 propproducerName min-width80px :show-overflow-tooltiptrue/el-table-column label库位码 proplocationCode min-width100px :show-overflow-tooltiptrue/el-table-column label操作 fixedright min-width60px aligncenter v-ifcanEditclass-namesmall-padding fixed-widthtemplate #defaultscopeel-button link typeprimary iconDelete title删除 clickhandleDelete(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});
其中开启深度监听
四、效果
