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

一、背景

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

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

二、vue代码

javascript 复制代码
   <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 才能保证,后期监听时数据有发生变化

javascript 复制代码
                {{
                  scope.row.totalLossoverRetail = computeDifferenceMoney(scope.row.stocktakeQty, scope.row.stocktakeTinyqty, scope.row.packageQty, scope.row.retailPrice, scope.row.totalRetail)
                }}

三、方法代码

javascript 复制代码
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});

其中开启深度监听

四、效果

相关推荐
brzhang12 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
码农研究僧13 分钟前
Vue3 上传后的文件智能预览(实战体会)
vue·html·图片预览
SummerGao.24 分钟前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪1 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&1 小时前
css word
前端·css
Мартин.1 小时前
[Meachines] [Hard] CrimeStoppers LFI+ZIP-Shell+Firefox-Dec+DLINK+rootme-0.5
前端·firefox
冰镇生鲜1 小时前
快速静态界面 MDC规则约束 示范
前端
技术与健康1 小时前
【解读】Chrome 浏览器实验性功能全景
前端·chrome
Bald Monkey1 小时前
【Element Plus】解决移动设备使用 el-menu 和 el-sub-menu 时,子菜单需要点击两次才会隐藏的问题
前端·elementui·vue·element plus