[vxe-table] 树形表格 总价=单价*数量,当单价和数量改变时,所有父级的总价同步改变

文章展示了如何在Vue.js应用中使用VXE表格组件来处理数据。它包括两个列(单价和数量),输入框用于编辑数据并触发`updateData`方法更新总价。当单元格失去焦点时,会计算当前行的总价。`calculateFeiyong`函数用于计算子节点的总价,而`updateParentNode`方法递归更新所有父节点的总价,确保总价的同步更新。
摘要由CSDN通过智能技术生成
<vxe-column field="danjia" title="单价" fixed="left" min-width="120">
   <template #default="{ row }">
     <el-input
       @blur="updateData(row)"
       v-if="!row.children.length"
       v-model="row.danjia"
     >
       <div slot="suffix" class="customSuffix"></div>
     </el-input>
     <span v-else></span>
   </template>
 </vxe-column>

<vxe-column field="count" title="数量" min-width="120">
   <template #default="{ row }">
      <el-input
        @blur="updateData(row)"
        v-if="!row.children.length"
        v-model="row.count"
      >
        <div slot="suffix" class="customSuffix"></div>
      </el-input>
      <span v-else></span>
    </template>
  </vxe-column>
// 计算当前节点的计划总价=所有子节点的总价之和
    calculateFeiyong(row) {
      const feiyong = row.children.reduce((prev, cur) => prev + cur.feiyong, 0);
      return feiyong;
    },

   // 更新父节点的 feiyong 字段
   updateParentNode(row) {
     // 获取当前行的父节点的数据
     const parentRow = this.tableData.find((x) => x.id === row.parrentId);
     if (!parentRow) {
       return;
     }
     // 当前节点是叶子节点,总价=单价*数量
     if (!row.children.length) {
       // 先计算叶子节点的总价
       const feiyong = Number(row.price) * Number(row.count);
       row.feiyong = (feiyong || 0);
     }
     // 再计算父级节点的总价=所有子节点的总价之和
     parentRow.feiyong = this.calculateFeiyong(parentRow);
     // 递归调用,一直递归到顶级父节点
     this.updateParentNode(parentRow);
   },
  // 表格更新
    updateData(row) {
      // 计算当前节点的总价,其所有父节点的总价同步改变
      this.updateParentNode(row);
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值