快捷導(dǎo)航

VUE3中Element table表頭動(dòng)態(tài)展示合計(jì)信息

更新時(shí)間：2024年11月12日 09:05:23 作者：十方天士

本文主要介紹了在Vue中實(shí)現(xiàn)動(dòng)態(tài)合計(jì)兩個(gè)字段并輸出摘要信息的方法,通過使用監(jiān)聽器和深度監(jiān)聽,確保當(dāng)數(shù)據(jù)變化時(shí)能正確更新合計(jì)結(jié)果,具有一定的參考價(jià)值,感興趣的可以了解一下

一、背景

原型上需要對兩個(gè)字段動(dòng)態(tài)合計(jì)，輸出摘要信息

原先想到是的Element的 :summary-method，發(fā)現(xiàn)不是動(dòng)態(tài)，所以換監(jiān)聽來實(shí)現(xiàn)

二、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="規(guī)格" prop="drugSpec" :show-overflow-tooltip="true"/>
          <el-table-column label="批號" prop="batchNo" :show-overflow-tooltip="true"/>
          <el-table-column label="賬面數(shù)" prop="batchStockDesc" min-width="90px"/>
          <el-table-column label="盤存數(shù)" 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="零售價(jià)" 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="采購價(jià)" 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="生產(chǎn)企業(yè)" prop="firmName" min-width="80px" :show-overflow-tooltip="true"/>
          <el-table-column label="產(chǎn)地" 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 才能保證，后期監(jiān)聽時(shí)數(shù)據(jù)有發(fā)生變化

                {{
                  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});

其中開啟深度監(jiān)聽

四、效果

到此這篇關(guān)于VUE3中Element table表頭動(dòng)態(tài)展示合計(jì)信息的文章就介紹到這了,更多相關(guān)VUE3 Element table動(dòng)態(tài)表頭內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: