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

devtools/2024/11/16 12:12:03/

一、背景 

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

原先想到是的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});

其中开启深度监听

四、效果


http://www.ppmy.cn/devtools/134426.html

相关文章

【Linux学习】【Ubuntu入门】1-4 ubuntu终端操作与shell命令2

显示网络配置命令&#xff1a;ifconfig 输入后显示未发现该命令&#xff0c;根据提示进行相应安装&#xff0c;安装结束之后再次输入该命令查看网络配置信息。 sudo ifconfig ens33 down&#xff1a;关闭ens33网卡&#xff0c;ens33为网卡名称&#xff0c;不同用户的可能不同…

HarmonyOs DevEco Studio小技巧31--画布组件Canvas

那天我们用画布实现了文字颜色的渐变&#xff0c;实际上画布还有很多好玩的功能&#xff0c;接下来让我们一起试一下画布怎么玩 Canvas 提供画布组件&#xff0c;用于自定义绘制图形。 接口 Canvas Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext…

智能化运维与AI/ML辅助决策:实现自动化与预测优化

智能化运维与AI/ML辅助决策&#xff1a;实现自动化与预测优化 目录 &#x1f916; 人工智能在运维中的应用场景与价值&#x1f4ca; 基于机器学习的异常检测与预测性维护&#x1f4a1; 运维自动化中的决策支持系统&#x1f9e0; 使用Python进行机器学习模型的运维应用&#x…

Centos使用Mysql

文章目录 1 连接数据库2 执行SQL脚本 1 连接数据库 mysql -u username -p [rootlocalhost ~]# mysql -u username -p2 执行SQL脚本 source /path/to/example.sql;

SpringBoot(二十三)SpringBoot集成JWT

最近整理完docker之后&#xff0c;突然想到&#xff0c;我是不是可以使用docker部署多个blog实例&#xff0c;来实现一下负载均衡呢&#xff1f; 现阶段&#xff0c;blog项目使用的是SESSION来做用户登录信息存储&#xff0c;如果配置负载均衡的话&#xff0c;那session其实就不…

Redis 概 述 和 安 装

安 装 r e d i s: 1. 下 载 r e dis h t t p s : / / d o w n l o a d . r e d i s . i o / r e l e a s e s / 2. 将 redis 安装包拷贝到 /opt/ 目录 3. 解压 tar -zvxf redis-6.2.1.tar.gz 4. 安装gcc yum install gcc 5. 进入目录 cd redis-6.2.1 6. 编译 make …

C++ STL -- 模版

C STL&#xff08;标准模板库&#xff09;简介 C STL&#xff08;Standard Template Library&#xff09;是C的一部分&#xff0c;提供了一组通用的、可复用的组件&#xff0c;以简化编程过程。STL通过模板和泛型编程的方式&#xff0c;使得开发者可以使用预定义的数据结构与算…

【笔记】关于git和GitHub和git bash

如何推送更新的代码到github仓库 如何在此项目已经提交在别的远程仓库的基础上更改远程仓库地址&#xff08;也就是换一个远程仓库提交&#xff09; 如何删除github中的一个文件 第二版 删除github上的一个仓库或者仓库里面的某个文件_github仓库删除一个文件好麻烦-CSDN博客 …