VUE3中Element table表头动态展示合计信息
更新时间：2024年11月12日 09:05:23 作者：十方天士
本文主要介绍了在Vue中实现动态合计两个字段并输出摘要信息的方法,通过使用监听器和深度监听,确保当数据变化时能正确更新合计结果,具有一定的参考价值,感兴趣的可以了解一下
一、背景
原型上需要对两个字段动态合计，输出摘要信息
原先想到是的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 = 0
let totalLossoverPurchase = 0
itemList.value.forEach(item => {
totalLossoverRetail = Number(totalLossoverRetail) + Number(item.totalLossoverRetail);
totalLossoverPurchase = Number(totalLossoverPurchase) + Number(item.totalLossoverPurchase);
})
sumDescription.value = '成本损溢金额 ' + totalLossoverPurchase + ' 零售损溢金额 ' + totalLossoverRetail
}, {deep: true});其中开启深度监听
四、效果
到此这篇关于VUE3中Element table表头动态展示合计信息的文章就介绍到这了,更多相关VUE3 Element table动态表头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了VUE中的filters过滤器使用方法，文章主要通过描述全局过滤器、全局过滤器之单一挂载、全局过滤器之批量挂载 、组件过滤器展开内容，具有一定的参考价值组要的小伙伴可以参考一下2022-03-03
这篇文章主要介绍了vue绑定数字类型 value为数字的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
我们在开发 Vue 项目的时候会使用一些前端组件库,例如 Element、Ant Design 等,这些组件库虽然方便,但是也有一些缺点,比如内置的图标太少,例如我们开发医疗、财务、工程等一些前端项目,内置的图标不能满足我们的需求,所以我们常常在Vue项目中引入SVG图标2024-09-09
vue-router嵌套路由方式(页面路径跳转但页面显示空白)
这篇文章主要介绍了vue-router嵌套路由方式(页面路径跳转但页面显示空白)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格,下面这篇文章主要给大家介绍了关于Vscode关闭Eslint语法检查的多种方式,文章通过图文介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Vue组件通信的几种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了手写实现Vue计算属性，本文从一个简单的计算属性例子开始，一步步实现了计算属性。并且针对这个例子，详细分析了页面渲染时的整个代码执行逻辑，需要的小伙伴可以参考一下2022-08-08
本篇文章主要介绍了Vue-cli创建项目从单页面到多页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
pinia是vue3官方的状态管理工具,当然vue2也可以用,vue2中的状态管理工具是vuex,vue3中不再使用vuex,推荐使用的是pinia,和vuex差不多,但比vuex更方便、更强、更好,下面这篇文章主要给大家介绍了关于Vue3之Pinia状态管理的相关资料,需要的朋友可以参考下2022-11-11
Vue 3.0是一个非常流行的JavaScript框架,不仅易于学习和使用,而且可以与许多UI框架集成,下面这篇文章主要给大家介绍了关于vue3.0+ts引入详细步骤以及语法校验报错问题的解决办法,需要的朋友可以参考下2024-01-01
最新评论